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

Я пытаюсь освоить тестирование компонентов в проекте 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();
  });

});

...тесты пройдены.

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
5 013
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
});

Другие вопросы по теме