React测试中fireEvent.click未触发useReducer状态变更问题求助

问题原因 #

1. App组件未包裹上下文Provider
   你定义的AppProvider没有在App.tsx中引入使用，所有组件调用useGlobalContext时拿到的都是初始化的空函数占位值，点击按钮不会触发任何状态更新逻辑，这是最核心的问题。
2. 测试用例写法不符合React Testing Library规范
   你把组件渲染和DOM元素查询放在了describe块的顶层，只会在测试初始化时执行一次，提前查到的元素引用不会跟着状态更新同步，且多个测试用例并行时会出现状态污染问题。

修复代码 #

1. 调整App.tsx，包裹AppProvider

import React from "react";
import styled from "styled-components";
// 导入上下文Provider
import { AppProvider } from "./context/context";
import Calculator from "./components/Calculator";
import "./_app.scss";

function App() {
  return (
    <Main>
      <div>
        {/* 用Provider包裹Calculator组件，注入状态和方法 */}
        <AppProvider>
          <Calculator />
        </AppProvider>
      </div>
    </Main>
  );
}

const Main = styled.main`
  display: grid;
  place-items: center;
  min-height: 100vh;
  div {
    background-color: #061017;
    border-radius: 0.5em;
  }
`;

export default App;

2. 调整测试用例写法

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import App from "./App";
import "@testing-library/jest-dom/extend-expect";

describe("Calculator test", () => {
  it("should return the correct sum value", () => {
    // 把渲染和元素查询放到测试用例内部，每个用例单独渲染实例
    const { getByTestId } = render(<App />);
    const btn7 = getByTestId("nm-btn-7");
    const btnSum = getByTestId("nm-btn-sum");
    const btn2 = getByTestId("nm-btn-2");
    const btnEql = getByTestId("eq-btn");
    const result = getByTestId("result");

    fireEvent.click(btn7);
    fireEvent.click(btnSum);
    fireEvent.click(btn2);
    fireEvent.click(btnEql);
    expect(result.textContent).toBe("9");
  });
});

修改完成后重新运行测试即可正常通过。

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