如何使用 axios 模拟自定义钩子进行测试？

Question

我有一个自定义钩子，可以从第三方 api 获取数据。我需要使用 vitest 创建一个测试，但我似乎找不到任何有效的东西。

如果有人能够提供帮助，我将不胜感激。我已经在下面添加了挂钩。

这就是钩子的名字...

const { data, error, loading } = useFetch({ url: 'https://api.some_url.com/search?q=', query: 'some search term' });

这是 useFetch 自定义钩子...

import { useEffect, useState } from 'react';

type FetchParams = {
  url: string;
  query: string;
};

export function useFetch(props: FetchParams) {
  const { url, query } = props;
  const [data, setData] = useState([]);
  const [error, setError] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    const fetchUrl: string = `${url}${query}`;

    const fetchData = async () => {
      setLoading(true);

      await fetch(fetchUrl)
        .then((response) => response.json())
        .then((response) => {
          setLoading(false);
          setData(response.data);
        })
        .catch((error) => {
          setLoading(false);
          setError(error);
        });
    };

    fetchData();
  }, [url, query]);

  return { data, error, loading };
}

Answer 1

有很多用于模拟 axios 的库。这就是你在不使用它们中的任何一个的情况下做到这一点的方法;)

import * as axios from 'axios';

jest.mock('axios');

it('test success', () => {
    axios.get.mockImplementation(() => Promise.resolve({ data: { ... } }));

    // actual test
});

错误可以用类似的方式进行测试，你只想模拟返回一个

Promise.reject

。