MSW模拟API调用时Redux store未填充、偶发空值怎么解决？

问题原因及修复方案 #

第一版代码失效的核心问题

你最初的代码违反了Redux的核心设计原则：reducer必须是无副作用的纯函数，不能在reducer内部发起异步请求、修改外部变量。
你之前在reducer里调用User.register()方法发起axios请求，这个请求是异步执行的，同步执行的reducer拿到的返回值直接是undefined，所以store里的user自然就是null，MSW的拦截逻辑即使生效也不会影响结果，因为你根本没有等请求返回就更新了store。 #

重构后偶现失效的问题原因

你重构后的逻辑方向是对的，把异步请求移到了组件的onSubmit里，reducer只做纯状态更新，偶现失效是异步处理和断言的姿势不对：

1. waitFor没有加判断条件：你现在的waitFor只会执行一次回调就结束，不会等到store更新，很多时候请求还没返回、dispatch还没执行，waitFor就已经跑完打印store了，自然就会拿到null。
2. 异步方法错误被静默吞掉：你的register方法catch到错误后只打了日志，没有把错误抛给上层，万一请求出错外层根本感知不到，只会看到dispatch没执行，store没更新。
3. 异步操作的等待逻辑不完整：userEvent.click本身是异步方法，你之前的等待逻辑没有覆盖到整个异步链路。

修复方案

1. 调整测试代码

// 点击按钮不需要包act，userEvent的方法已经内部处理了act逻辑
await userEvent.click(screen.getByTestId('register-submit-button'));

// waitFor里加明确的断言条件，会轮询直到条件满足或者超时
await waitFor(() => {
  expect(store.getState().auth.user).toEqual(expect.objectContaining({
    email: expect.any(String),
    token: expect.any(String),
    active: true,
    loggedIn: true
  }))
  // 这时候再打印store肯定是有值的
  console.log("Store:", store.getState())
})

2. 优化register方法的错误处理，不要吞错

async register(data) {
  try {
    const res = await axios.post(REGISTER_API_ENDPOINT, {
      email: data.email,
      firstName: data.firstName,
      lastName: data.lastName,
      password: data.password
    })
    return res.data
  } catch (error) {
    console.error('注册请求失败', error)
    // 把错误抛给上层，方便调用方处理失败逻辑
    throw error
  }
}

3. 统一onSubmit的异步写法（可选，避免逻辑混乱）

const onSubmit = async data => {
  if (data.password !== data.confirmPassword) {
    setError('password', {
      type: "password",
      message: "Passwords don't match"
    })
    return;
  }
  delete data.confirmPassword
  try {
    const user = new User()
    const userData = await user.register(data)
    cookie.set("user", userData.email);
    cookie.set("token", userData.token);
    dispatch(createNewUser(userData))
  } catch (err) {
    // 这里可以加注册失败的表单提示
    console.error(err)
  }
}

测试方案合理性

你用MSW拦截接口请求的测试方案是完全正确的，属于现在前端集成测试的最佳实践之一，调整完异步和断言逻辑后就不会出现偶现失败的问题。

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