0

我正在尝试测试一个简单的自定义钩子：

export const getSearchResults = async (searchText: string) => {
  const { data } = await axios.get(`${BASE_URL}/search`, {
    params: {
      searchText,
      apiToken: API_KEY
    },
  });

  return data as SearchResponse;
};

export default function useFetchSearch(searchTerm: string) {
  return useQuery<SearchResponse>([ 'search', searchTerm ], () => getSearchResults(searchTerm));
}

首先，我尝试用 jest 来模拟 API 调用，然后我用 nock 进行了尝试，正如它在 react-query 文档 ( https://react-query.tanstack.com/guides/testing ) 中所说的那样。

我的测试如下所示：

it('Displays card', async () => {
    const queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          retry: false,
        },
      },
    });

    const wrapper = ({ children }: any) => (
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    );

    const BASE_URL = process.env.REACT_APP_API_URL;

    const expectation = nock(`${BASE_URL}`)
      .get('/search')
      .reply(200, {
        answer: 42
      });


    const { result, waitFor } = renderHook(() => useFetchSearch('test'), { wrapper });

    await waitFor(() => result.current.isSuccess, { interval: 100 });


    expect(result.current.data.answer).toEqual(42);
  });

我得到的错误是：错误：1000 毫秒后在 waitFor 中超时。

我的 package.json 如下：

"dependencies": {
    "@testing-library/dom": "7.21.4",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/react-hooks": "^7.0.1",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "16.9.0",
    "@types/react-dom": "16.9.0",
    "@types/react-router": "^5.1.12",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
    "nock": "^13.1.1",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-query": "^3.5.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-test-renderer": "16.9.0",
    "typescript": "^3.8.3",
  },

react-test-renderer、react 和 react-dom 的版本是匹配的。

任何输入都非常受欢迎！

4

2 回答 2

0

感谢所有输入。我发现了问题所在：

jest在运行测试之前，我不小心嘲笑了我的自定义钩子。删除后jest.mock('getSearchResults')，它按预期工作。

于 2021-11-17T20:18:34.317 回答
0

从您的依赖项列表中，我会说您正在使用axios，这不是react-query 文档中的示例所使用的。

从诺克文档：

Nock 通过覆盖 Node 的 http.request 函数来工作。此外，它也覆盖了 http.ClientRequest 以覆盖直接使用它的模块。

通过使用axios，您可能不会http.request直接使用。

关于 nock 和 axios 的文档中还有一个常见问题部分：

要将 Nock 与 Axios 一起使用，您可能需要将 Axios 配置为使用 Node 适配器，如下例所示：

import axios from 'axios'
import nock from 'nock'
import test from 'ava' // You can use any test framework.

// If you are using jsdom, axios will default to using the XHR adapter which
// can't be intercepted by nock. So, configure axios to use the node adapter.
//
// References:
// https://github.com/nock/nock/issues/699#issuecomment-272708264
// https://github.com/axios/axios/issues/305
axios.defaults.adapter = require('axios/lib/adapters/http')

作为替代方案，我可以推荐使用mock-service-worker来拦截 webworker 层上的网络请求。优点是您不仅可以将这些模拟用于测试，还可以用于开发之类的事情storybook，甚至是在开发过程中。

于 2021-07-27T14:37:16.647 回答