React Testing Library计数器组件测试失败问题求助

问题原因 #

你在测试代码里提前用screen.getByText("0")把初始状态的h1元素存在了count变量中，当点击Increase按钮触发组件状态更新后，React会重新渲染组件并替换掉原来的h1元素。但你断言时用的还是旧的DOM节点引用，它的文本内容始终是初始的"0"，所以断言"1"会失败，改成"0"自然就通过了。

解决办法 #

不要提前保存DOM元素的引用，而是在状态更新后重新查询最新的DOM元素，这也符合React Testing Library鼓励的"像用户一样交互和查询"的理念。修改后的测试代码可以是这样：

import {screen, render} from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import Counter from "."

test("counter component test", () => {
    render(<Counter />)

    const increaseBtn = screen.getByText("Increase")

    userEvent.click(increaseBtn);
    // 点击后直接查询更新后的文本
    expect(screen.getByText("1")).toBeInTheDocument();
})

或者如果你需要明确断言元素的文本内容，也可以重新获取元素后再断言：

test("counter component test", () => {
    render(<Counter />)

    const increaseBtn = screen.getByText("Increase")

    userEvent.click(increaseBtn);
    const updatedCount = screen.getByRole("heading", { name: "1" });
    expect(updatedCount).toHaveTextContent("1");
})

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