React Testing Library测试间DOM残留，如何实现测试隔离？

我是测试新手，希望在每个测试用例执行后重置DOM以保证测试隔离。复制测试用例后，第一个测试通过，第二个测试失败，报错：TestingLibraryElementError: Found multiple elements with the placeholder text of: Title，说明DOM未清除前一次测试的实例。这是正常行为吗？该如何在测试间重置DOM？我尝试了Jest和React Testing Library文档中的cleanup方法，但无效，且文档说明该方法应在每次测试后自动重置DOM。

测试代码：

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import TaskList from './TaskList';

describe('TaskList Component', () => {
  it('Adds a new task when the add button is clicked', async () => {
    const user = userEvent.setup();
    const { getByPlaceholderText, getByAltText } = render(<TaskList />);

    const addButton = getByAltText('add');
    await user.click(addButton);

    expect(getByPlaceholderText('Title')).toBeInTheDocument();
  });

  it('Adds a new task when the add button is clicked', async () => {
    const user = userEvent.setup();
    const { getByPlaceholderText, getByAltText } = render(<TaskList />);

    const addButton = getByAltText('add');
    await user.click(addButton);

    expect(getByPlaceholderText('Title')).toBeInTheDocument();
  });
});

使用的依赖包版本：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.3",
    "@types/react": "^18.0.37",
    "@vitejs/plugin-react": "^4.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.6.1",
    "jest-environment-jsdom": "^29.6.1",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }

这不是正常行为。React Testing Library v14+ 本身会在每个测试用例结束后自动执行cleanup清理DOM，但你的情况大概率是Jest环境配置缺失，导致自动清理逻辑没有被触发。另外，如果组件依赖全局状态（比如Context、Redux），cleanup只会清理DOM，不会重置全局状态，也可能导致测试间污染。

1. 检查Jest配置，确保自动cleanup逻辑被引入
   打开你的Jest配置文件（jest.config.js或jest.config.ts），确认以下配置：

   export default {
     testEnvironment: 'jsdom', // 必须指定为jsdom环境
     setupFilesAfterEnv: [
       '@testing-library/jest-dom',
       '@testing-library/react/dist/cleanup-after-each' // 手动引入自动清理逻辑
     ],
     // 其他现有配置...
   };
   

2. 手动添加afterEach钩子执行cleanup
   如果配置调整后仍无效，可以在测试文件中手动添加afterEach钩子，强制清理DOM：

   import { render, cleanup } from '@testing-library/react';
   import userEvent from '@testing-library/user-event';
   
   import TaskList from './TaskList';
   
   describe('TaskList Component', () => {
     // 每个测试后强制清理DOM
     afterEach(() => {
       cleanup();
     });
   
     it('Adds a new task when the add button is clicked', async () => {
       const user = userEvent.setup();
       const { getByPlaceholderText, getByAltText } = render(<TaskList />);
   
       const addButton = getByAltText('add');
       await user.click(addButton);
   
       expect(getByPlaceholderText('Title')).toBeInTheDocument();
     });
   
     // 建议修改测试用例名称，方便排查问题
     it('Adds another new task when the add button is clicked', async () => {
       const user = userEvent.setup();
       const { getByPlaceholderText, getByAltText } = render(<TaskList />);
   
       const addButton = getByAltText('add');
       await user.click(addButton);
   
       expect(getByPlaceholderText('Title')).toBeInTheDocument();
     });
   });
   

3. 重置全局状态（如果有）
   如果你的TaskList组件依赖全局状态管理工具（比如Context、Redux），需要在afterEach钩子中额外重置状态，避免测试间状态污染。例如，使用Context的话，可以在测试中重新渲染Provider并重置初始值。

内容的提问来源于stack exchange，提问作者jufg