Где монтировать и размонтировать внутри функции описания фермента?

Question

Я пытаюсь освоить тестирование компонентов в проекте 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 после двух тестовых функций, что вызывает ошибку:

Метод «имитация» предназначен для запуска на 1 узле. Вместо этого найдено 0

Я думаю, что это происходит, потому что компонент размонтируется до того, как тесты действительно будут запущены.

Если я 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();
  });

});

... испытания пройдены.

Это кажется чрезмерным. Что если мой набор тестов имеет десять тестовых функций? Должен ли я монтировать и демонтировать подобное для каждого теста?

Answer 1

Вы можете использовать функции 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
});