React Jest 测试失败，MSW

如何解决React Jest 测试失败，MSW

我创建了一个 basic React application 并按照 instructions 配置了 MSW 以设置单元测试（节点环境）和浏览器

App 组件使用自定义钩子 useFormSubmission 并呈现一个带有用户名文本字段和提交按钮的简单表单。表单的提交处理程序使用自定义钩子返回的回调。

目前所有的单元测试都失败了。我可以看到 MSW 收到请求，但没有看到任何回复。控制台记录了 reducer 状态 Status: pending，但它并没有超出这个范围（似乎响应被吞没/丢失了？）奇怪的是，该应用在与开发服务器 npm start 一起运行时可以正常工作。

const useFormSubmissionReducer = (state,action) => {
  switch (action.type) {
    case "start":
      return { status: "pending" };
    case "resolved":
      return { status: "resolved",data: action.data };
    case "rejected":
      return { status: "rejected",error: action.error };
    default:
      throw new Error(`Unsupported type: ${action.type}`);
  }
};

const handleResponse = async (response) => {
  const data = await response.json();

  if (response.status >= 200 && response.status <= 299) {
    return Promise.resolve(data);
  } else {
    return Promise.reject(data);
  }
};

const useFormSubmission = () => {
  const [state,dispatch] = useReducer(useFormSubmissionReducer,{
    status: "idle",data: null,error: null,});

  const callback = useCallback((request) => {
    const payload = JSON.stringify(request);

    console.log("dispatching: ",request);
    dispatch({ type: "start" });

    fetch("/api/register",{
      method: "POST",headers: { "Content-Type": "application/json" },body: payload,})
      .then(handleResponse)
      .then(
        (data) => {
          console.log("Data: ",data);
          dispatch({ type: "resolved",data });
        },(error) => {
          console.log("Error: ",error);
          dispatch({ type: "rejected",error });
        }
      )
      .catch((error) => {
        console.log("Exception: ",error);
        dispatch({ type: "rejected",error: { message: error.message } });
      });
  },[]);

  return [state,callback];
};

我花了 3 天时间四处挖掘并试图找出配置或自定义钩子或组件的编写方式是否有问题。

解决方法

结果证明测试执行得非常快，最终出现了竞争条件。我添加了 await waitForElementToBeRemoved(screen.getByText(<element you are looking for>))，现在所有测试都通过了。