React 中的全局 beforeEach 和 afterEach Jest答案

【问题标题】：Global beforeEach and afterEach Jest in ReactReact 中的全局 beforeEach 和 afterEach Jest
【发布时间】：2021-09-18 17:04:43
【问题描述】：

我正在使用 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 变量）？期待您的回复！

【问题讨论】：

jestjs.io/docs/configuration#globalsetup-string 或 jestjs.io/docs/configuration#setupfilesafterenv-array
@Elias 是正确的，但是我将无法访问 container 变量
好吧，这通常是个坏主意，我建议您阅读以下内容：kentcdodds.com/blog/avoid-nesting-when-youre-testing，但同样，在测试之间共享变量非常糟糕。
@Elias 我不想共享变量...我希望为每个测试重新定义它。
大量练习。测试 UI 真的很难。我自己仍然很挣扎。

标签： javascript reactjs jestjs

【解决方案1】：

虽然从技术上讲，这不是您所提问题的答案，但这是您遇到的根本问题的解决方案。

你输入了错误的render：

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

从react-dom 导入的render 函数用于将结果实际呈现给浏览器，而不是用于测试。

您需要：import {render} from '@testing-library/react'。测试库为您完成所有容器管理。

如果你真的需要容器来做任何事情，你仍然可以这样做：

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

但大多数时候这是不必要的。

【讨论】：