时间戳

首页 > 解决方案 > 使用 jest mockImplementation 在 typescript 中模拟自定义钩子

javascript - 使用 jest mockImplementation 在 typescript 中模拟自定义钩子

问题描述

我有一个使用一个自定义钩子的组件，我需要编写一些测试并确保我模拟了钩子。如何模拟自定义钩子以对我的组件进行单元测试，就像钩子的代码甚至不存在一样？

import "./styles.css";
import useAPICall from "@src/hooks/useAPICall ";

export default function App() {
  const { onAPICall } = useAPICall(123);
  const handleOnClick = useCallback(() => {
    onAPICall();
  });

  return (
    <div className="App">
      <button onClick={handleOnClick}>Click</button>
    </div>
  );
}
///test.tsx all I know is this. but I am not sure how I can use mockImplementation that does not return anything
jest.mock('@src/hooks/useAPICall', () => ({
  onAPICall: () => jest.fn(),
}));

标签： javascripttypescriptunit-testingjestjs

解决方案

您可以通过三个简单的步骤来完成：

  • 导入要模拟的模块
  • 然后模拟模块
  • 提供模拟模块的返回值。
import React from 'react';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';
import useAPICall from "@src/hooks/useAPICall "; // 1st step

jest.mock('@src/hooks/useAPICall'); //2nd step

test('can call useAPICall hook', () => {
  useAPICall.mockReturnValue({ onAPICall: jest.fn() }); // 3rd step
  const { getByRole } = render(<NewApp />);
  userEvent.click(getByRole('button'));
  expect(useAPICall).toBeCalled();
});

推荐阅读