使用MSW进行React Jest测试失败

Question

我已经创建了一个basic React application，并按照instructions配置了MSW，以便为单元测试(节点环境)和浏览器进行设置。

应用程序组件使用一个定制的钩子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天的时间深入研究，试图找出配置或自定义钩子或组件的编写方式是否有问题。

Answer 1

事实证明，这些测试执行得相当快，最后出现了竞争条件。我已经添加了await waitForElementToBeRemoved(screen.getByText(<element you are looking for>))，现在所有的测试都通过了。