React Testing Library与Jest测试Tab切换组件时元素断言失败——是否为引用失效问题？

你猜的完全没错！问题就出在你提前存储的Tab元素引用已经过期失效了。

让我拆解一下为什么会这样：

• 你第一次点击Tab2后，用queryByTestId("tab_2_id")获取到的tab2变量，指向的是当时组件渲染出来的Tab2 DOM节点。
• 但之后你又点击了Tab3和Tab1，组件的state更新，触发了重新渲染——这时候旧的Tab2节点已经被React销毁，从文档里移除了。
• 当你再次点击Tab2时，React会创建一个全新的Tab2 DOM节点，但你代码里的tab2变量还是指向之前那个已经被销毁的旧节点，所以断言expect(tab2).toBeInTheDocument()自然会失败，因为旧节点早就不在文档里了。

解决这个问题的核心思路很简单：不要提前把Tab元素的引用存在变量里，而是每次切换Tab后，都从当前的文档中重新获取最新的元素。这样你拿到的永远是当前页面上真实存在的DOM节点，不会出现引用过期的问题。

修改后的测试代码如下：

it("switches tabs when heading is clicked", () => {
  render(<MyTabs />);
  const tab1Heading = screen.getByText("Tab 1");
  const tab2Heading = screen.getByText("Tab 2");
  const tab3Heading = screen.getByText("Tab 3");

  // 验证初始状态：默认显示Tab1
  expect(screen.getByTestId("tab_1_id")).toBeInTheDocument();
  expect(screen.queryByTestId("tab_2_id")).not.toBeInTheDocument();
  expect(screen.queryByTestId("tab_3_id")).not.toBeInTheDocument();

  // 切换到Tab2并验证
  fireEvent.click(tab2Heading);
  expect(screen.queryByTestId("tab_1_id")).not.toBeInTheDocument();
  expect(screen.getByTestId("tab_2_id")).toBeInTheDocument();
  expect(screen.queryByTestId("tab_3_id")).not.toBeInTheDocument();

  // 切换到Tab3并验证
  fireEvent.click(tab3Heading);
  expect(screen.queryByTestId("tab_1_id")).not.toBeInTheDocument();
  expect(screen.queryByTestId("tab_2_id")).not.toBeInTheDocument();
  expect(screen.getByTestId("tab_3_id")).toBeInTheDocument();

  // 切换回Tab1并验证
  fireEvent.click(tab1Heading);
  expect(screen.getByTestId("tab_1_id")).toBeInTheDocument();
  expect(screen.queryByTestId("tab_2_id")).not.toBeInTheDocument();
  expect(screen.queryByTestId("tab_3_id")).not.toBeInTheDocument();

  // 再次切换到Tab2验证（这次不会有引用过期问题了）
  fireEvent.click(tab2Heading);
  screen.debug();
  expect(screen.queryByTestId("tab_1_id")).not.toBeInTheDocument();
  expect(screen.getByTestId("tab_2_id")).toBeInTheDocument();
  expect(screen.queryByTestId("tab_3_id")).not.toBeInTheDocument();
});

这里我还调整了查询方法的使用，更符合React Testing Library的最佳实践：

• 用getByTestId来断言元素存在：如果元素不存在，它会直接抛出错误，比queryByTestId更直观。
• 用queryByTestId来断言元素不存在：它会返回null，适合配合not.toBeInTheDocument()使用。

这样的测试不仅能解决你的问题，可读性和健壮性也会更好。

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