如何测试使用自定义TypeScript React Hook的组件？

Posted 2023-02-24

我目前正在用Typescript编写一个React组件，该组件利用了一个称为useAxios的axios-hooks钩子。使用此钩子的示例是here：

 export const App = () => 
  const [ data, loading, error , refetch] = useAxios(
    "https://api.myjson.com/bins/820fc"
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <div>
      <button onClick=e => refetch()>refetch</button>
      <pre>JSON.stringify(data, null, 2)</pre>
    </div>
  );
;

const rootElement = document.getElementById("root");
render(<App />, rootElement);

我试图弄清楚如何编写一个可以模拟useAxios钩子的测试。我尝试创建基础axios组件的模拟，但无法正常工作：

import React from "react"
import  render  from "@testing-library/react"
import  Test  from "../test"
import useAxios from "axios-hooks"

jest.mock("axios-hooks")
const mockedAxios = useAxios as jest.Mocked<typeof useAxios>

it("Displays loading", () => 
  // How to mock the return values in the following line?
  // mockedAxios.

  const  getByText  = render(<Test />)

  expect(getByText("Loading...")).toBeDefined()
)

[我知道我不必模拟axios这是基础的依赖项，我应该能够模拟useAxios，但是我还是会尝试的。

我意识到这个问题已经在SO上被多次提及，但是我可以找到针对此特定用例的解决方案。

任何帮助，不胜感激！

答案

模拟模块并设置每个测试的useAxios预期结果

jest.mock('axios-hooks');

import useAxios from 'axios-hooks';

test('App displays loading when request is fetching', () => 
  useAxios.mockReturnValue(Promise.resolve( loading: true ));
  // mount component
  // Verify "Loading" message is rendered
);

另一答案

我想出了自己的方法。为了测试自定义钩子，我做了以下工作：

import * as useAxios from "axios-hooks"
jest.mock("axios-hooks")
const mockedAxios = useAxios as jest.Mocked<typeof useAxios>

it("Displays loading message", async () => 

  // Explicitly define what should be returned
  mockedAxios.default.mockImplementation(() => [
      
        data: [],
        loading: true,
        error: undefined
      ,
      () => undefined
    ])

  const  getByText  = render(<Test />)

  expect(getByText("Loading...")).toBeDefined()
)