Расскажи, пожалуйста, в чем у тебя загвоздка с тестами.
Я попробую тебе помочь. Я вижу, ты уже добавил jest
и enzyme
в зависимости. Давай на этом и остановимся и будем использовать их.
Вообще, тесты построены на том, что ты сравниваешь какие-то 2 переменные и если они не совпадают, то говоришь, что тест проходит, а если эти переменные не совпадают, говоришь, что тест падает.
В разных библиотеках для тестирования, такие сравнения делаются по-разному:
Кроме того, у библиотек есть функционал, который позволяет выводить красиво сообщения об ошибках и вообще писать хорошие логи:
describe('School Match', () => {
it("2*2 is equal 4", () => {
expect(2*2).toBe(4);
});
});
Такой код выведет:
PASS test/schoolMath.spec.js
School Match
✓ 2*2 is equal 4 (3ms)
Помимо сравнения двух переменных у библиотек, таких как jest, есть много других удобных функций. Смотри раздел про матчеры: https://facebook.github.io/jest/docs/using-matchers.html#content. Например, нам может пригодиться toMatch
. Он сравнивает строки.
Enzyme нам нужен для того, чтобы рендерить компоненты и взаимодействовать с ними (кликать и т.п.).
Самый простой тест, это мы рендерим компонент и проверяем его содержимое:
import React from 'react';
import { shallow } from 'enzyme';
import Footer from '../src/components/Footer';
describe('Footer component', () => {
it('Contains copyright information', () => {
const wrapper = shallow(<Footer />);
expect(wrapper.find('.container .text-right')).toMatch(/Aliaksei Patotski/);
});
});
В более сложных тестах в компонент при рендеринге нужно передавать объекты и проверять, например, что значения из этих объектов отображаются и отображаются в правильных местах.
Спрашивай вопросы, если что-то непонятно.