Блог

Главная - Вопросы по программированию - Глобальная шутка до и после в React

Глобальная шутка до и после в React

#javascript #reactjs #jestjs

Вопрос:

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

 import { screen } from '@testing-library/react';
import { render, unmountComponentAtNode } from 'react-dom';
import Form from './Form';

let container: Element | null = null;

// setup a DOM element as a render target
beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

// cleanup on exiting
afterEach(() => {
  unmountComponentAtNode(container!);
  container?.remove();
  container = null;
})

test('renders with a heading', () => {
  render(
    <Form heading={'Form Heading'} />, container
  );

  const element = screen.getByText(/form heading/i);

  expect(element).toBeInTheDocument();
});

Как вы, вероятно, ожидали, мне нужно выполнить beforeEach настройку и afterEach настройку для каждого тестового файла. Можно ли сделать это глобальным(после того, как мы стали глобальными, нам все еще нужен доступ к container переменной to)? С нетерпением ждем вашего ответа!

Комментарии:

1. jestjs.io/docs/configuration#globalsetup-string или jestjs.io/docs/configuration#setupfilesafterenv-array

2. @Elias это правильно, но тогда у меня не будет доступа к container переменной

3. Ну, это вообще плохая идея, я бы рекомендовал вам прочитать это: kentcdodds.com/blog/avoid-nesting-when-youre-testing , но опять же, очень плохо распределять переменную между тестами.

4. @Элиас, я не хочу делиться переменной… Я хочу, чтобы он был переопределен для каждого теста.

5. Куча практики. Тестирование пользовательского интерфейса действительно сложно. Я и сам до сих пор довольно много борюсь.

Ответ №1:

Хотя технически это не ответ на заданный вами вопрос, это решение вашей основной проблемы.

Вы импортируете неправильный render :

import { render, unmountComponentAtNode } from 'react-dom';

render Функция, импортированная из react-dom , используется для фактического отображения результата в браузере, а не для тестирования.

Вам необходимо: import {render} from '@testing-library/react' . Библиотека тестирования выполняет все функции по управлению контейнерами за вас.

Если вам действительно нужен контейнер для чего-либо, вы все равно можете это сделать:

 const {container} = render(/* ... */);

Но в большинстве случаев в этом нет необходимости.

Метки: