React Testing Library中cleanup方法失效，测试用例间互相干扰

问题根源 #

你的测试用例互相干扰的核心原因是所有测试共享同一份 localStorage 存储空间，前一个测试执行时写入 localStorage 的待办数据没有被清理，后续测试渲染组件时，getTodoList 方法直接读取了上一次测试遗留的数据，导致初始状态不符合预期。

解决方案 #

1. 每次测试前清空存储数据

修改测试文件的 beforeEach 钩子，在渲染组件前先清空 localStorage 中存储的待办列表，保证每个测试的初始状态独立：

beforeEach(() => {
  // 清理上一次测试遗留的待办数据
  localStorage.removeItem("list");
  render(<AddTodo />);
});

2. 修正不符合独立性要求的测试用例

你当前的删除测试依赖上一个测试添加的待办数据，本身就不符合单测独立性原则，且删除操作后没有重新查询DOM就判断长度（第一次查询拿到的是删除前的元素快照，长度不会自动更新），修改如下：

it("should remove when click on check button", () => {
  // 主动添加当前测试需要的待办数据
  addTask(["测试待办1"]);
  let listEl = screen.getAllByTestId("btn2");
  expect(listEl.length).toBe(1);

  removeTask(listEl);

  // 删除后重新查询DOM获取最新的元素列表
  listEl = screen.queryAllByTestId("btn2");
  expect(listEl.length).toBe(0);
});

3. 修正断言语法错误

单条待办添加测试中的 toBeInTheDocument 是断言方法，需要加括号调用：

expect(listEl).toBeInTheDocument();

可选优化 #

如果你使用的是 React Testing Library 13 及以上版本，框架默认会在每个测试结束后自动清理渲染的组件，你在集成测试区块写的 afterEach(() => { cleanup(); }) 属于冗余代码，可以直接删除。

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