React函数组件Jest测试中setState无法触发重渲染问题

问题根源 #

测试中无法触发组件重渲染的核心原因是测试用例间的回调污染：authChangeCallbacks数组在每次测试前没有清空，导致第二个测试执行时，调用的是第一个测试中已卸载组件的回调函数——这个回调对应的组件实例早已被销毁，执行setState自然不会触发当前测试组件的重渲染。

另外，组件的useEffect依赖state.pageStatus，每次状态变更会重新订阅onAuthStateChanged，但这不是本次测试失败的直接原因，只是需要注意的组件逻辑细节。

修复步骤 #

1. 重置回调数组，隔离测试用例 #

在beforeEach中清空authChangeCallbacks数组，确保每个测试用例使用的是当前组件实例的回调：

describe("login page", () => {
  beforeEach(() => {
    authChangeCallbacks.length = 0; // 关键：清空回调数组，避免测试间污染
    (onAuthStateChanged as jest.Mock).mockImplementation(mockOnAuthStateChanged);
    jest.spyOn(router, "useNavigate").mockImplementation(() => navigate);
  });

  // ... 测试用例
});

2. 可选：清除Mock，避免残留状态 #

在afterEach中清除所有Mock的调用记录，进一步隔离测试用例：

afterEach(() => {
  jest.clearAllMocks();
});

3. 确认组件枚举值正确性 #

确保PageStatus枚举中Loading和SignIn是不同的有效值，避免状态判断逻辑失效：

// 示例枚举定义，根据实际情况调整
enum PageStatus {
  Loading = "LOADING",
  SignIn = "SIGN_IN"
}

验证修复后的测试逻辑 #

修复后，第二个测试用例执行时：

1. 渲染Login组件，当前组件的onAuthStateChanged回调被存入清空后的authChangeCallbacks数组
2. 调用authChangeCallbacks[0](null)触发无用户逻辑，此时执行的是当前组件实例的回调
3. setState更新pageStatus为SignIn，组件触发重渲染，EmailField元素正常渲染
4. findByTestId("EmailField")可以找到目标元素，测试通过

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