Я пытаюсь освоить тестирование компонентов в проекте React. Пока у меня есть один тестовый файл для одного компонента, и я пытаюсь подготовить этот файл как набор тестов с несколькими тестами в нем.
import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import HamburgerIcon from './HamburgerIcon';
Enzyme.configure({ adapter: new Adapter() });
describe('<HamburgerIcon />', () => {
const hamburgerIcon = mount(<HamburgerIcon showOverlay = {showOverlay} />);
it('displays on mobile', () => {
...
...
});
it('has class .open after click', () => {
...
...
});
hamburgerIcon.unmount();
});
Я удалил внутренности двух тестов, но в основном два теста завернуты в describe функцию, и я пытаюсь mount компонент один раз и unmount компонент один раз, чтобы все было СУХИМ (не повторяй сам).
Я поместил mount перед двумя функциями it, полагая, что монтирование компонента перед запуском тестов имеет логический смысл.
Я поместил unmount после двух тестовых функций, что вызывает ошибку:
Method “simulate” is meant to be run on 1 node. 0 found instead.
Я думаю, это происходит из-за того, что компонент размонтируется до того, как тесты будут фактически запущены.
Если я mount и unmount в обоих тестах, вот так...
describe('<HamburgerIcon />', () => {
it('displays on mobile', () => {
const hamburgerIcon = mount(<HamburgerIcon showOverlay = {showOverlay} />);
...
...
hamburgerIcon.unmount();
});
it('has class .open after click', () => {
const hamburgerIcon = mount(<HamburgerIcon showOverlay = {showOverlay} />);
...
...
hamburgerIcon.unmount();
});
});
...тесты пройдены.
Хотя это кажется чрезмерным. Что делать, если в моем наборе тестов есть десять тестовых функций? Должен ли я монтировать и размонтировать так для каждого теста?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете использовать функции beforeEach и afterEach для настройки и очистки теста.
afterEach(() => {
//do the unmounting and other stuff here
//this will be called after each test case
});
beforeEach(() => {
//do the mounting and setting up the test case here
//this will be called before each test case
});