如何在 React 中使用 Jest 测试 useEffect Fetch

Question

如何在 React 中使用 Jest 测试我的 useEffect Fetch？我尝试寻找答案并找到了我复制的代码以进行尝试，但仍然未能通过测试。我以前没有使用过 Jest，目前正在尝试在我正在编写的代码中实现它。

这是我在 test.js 文件中的测试：

  it('Displays days from 1 to 31', async () => {
    expect(useEffectTest).toBe([{ day: 1 }]);
  });

这是另一个名为 calendar.jsx 的组件中的 useEffect：

 const useEffectTest = () => {
  const [daysData, setDaysData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5001/chocolates')
      .then((resp) => resp.json())
      .then((data) => setDaysData(data));
  }, []);

  console.log(daysData);
};

我想测试获取的 api 是否从对象数组中获取此数据：

{ day: 1, status: 'empty' || 'open' }

提前感谢您的帮助。

Answer 1

首先，你需要更新你的单元测试来调用你的函数，像这样：

it('Displays days from 1 to 31', async () => {
    expect(useEffectTest()).toBe([{ day: 1 }]);
});

这是因为expect 需要将您的useEffectTest 函数返回的数据传递给它。

但是，这仍然会失败，因为您的函数没有返回任何内容。所以我们需要更新useEffectTest以返回daysData，像这样：

 const useEffectTest = () => {
  const [daysData, setDaysData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5001/chocolates')
      .then((resp) => resp.json())
      .then((data) => setDaysData(data));
  }, []);

  return daysData;
};

接下来，我们通常不想从单元测试中发出网络请求。这是因为网络请求会使单元测试变得缓慢而脆弱。例如，如果您的 API 服务器出现故障，我们仍然希望单元测试通过。为了解决这些问题，我们需要模拟 fetch 请求。模拟获取请求的一种流行方法是使用 jest-fetch-mock 库。