除非一次又一次地重新渲染每个组件，否则描述方法只能通过一次测试

Question

每当描述块包含多个测试时，我正试图弄清楚为什么我的测试(单独运行时通过(会失败。举个例子，我从我的真实代码中提取并简化了这个例子：

describe('Create Account Form', () => {
const {container} = render(<CreateAccountForm />);
const email = container.querySelector('input[name="email"]');
const password1 = container.querySelector('input[name="password1"]');
it('Should render all fields', () => {
allInputs.forEach((input) => {
expect(input).toBeInTheDocument();
});
});
it('Another test', () => {
expect(email).toBeInTheDocument(); // fails
});
});

第二次测试失败，但只有在注释掉第一次测试或在测试中再次渲染容器时才通过，如下所示：

it('Another test', () => {
const {container} = render(<CreateAccountForm />);
const email = container.querySelector('input[name="email"]');
expect(email).toBeInTheDocument(); // passes
});

为什么一定要这样？我宁愿不必重新呈现容器并在每个测试块中声明新的变量。

谢谢

Answer 1

RTL将卸载在afterEach挂钩中使用渲染装载的React树。请参见清理。

请注意，如果您使用的测试框架支持afterEach全局，并且它被注入到您的测试环境中(如mocha、Jest和Jasmine(，那么这将自动完成。

将render代码移动到beforeEach或单个测试用例中。这样我们就可以在每个测试用例之前创建反应树。将测试用例彼此隔离，使用它们自己的测试数据而不影响其他测试用例。

例如

index.tsx:

import React from 'react';
export function Example() {
return (
<div>
<input name="email" />
<input name="password1" />
</div>
);
}

index.test.tsx:

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { Example } from './';
describe('70753645', () => {
let email, password1, allInputs;
beforeEach(() => {
const { container } = render(<Example />);
email = container.querySelector('input[name="email"]');
password1 = container.querySelector('input[name="password1"]');
allInputs = container.querySelectorAll('input');
});
it('Should render all fields', () => {
allInputs.forEach((input) => {
expect(input).toBeInTheDocument();
});
});
it('Another test', () => {
expect(email).toBeInTheDocument();
});
});

测试结果：

PASS  stackoverflow/70753645/index.test.tsx (9.222 s)
70753645
✓ Should render all fields (24 ms)
✓ Another test (3 ms)
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        9.717 s

软件包版本：

"@testing-library/react": "^11.2.2",
"jest": "^26.6.3",