如何在 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 需要将 return 从您的 useEffectTest 函数传递给它的数据。

但是，这仍然会失败，因为您的函数没有 returning 任何东西。所以我们需要更新useEffectTest到returndaysData，像这样：

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

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

  return daysData;
};

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

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

How to Test useEffect Fetch with Jest in React

javascript

reactjs

jestjs

react-testing-library