如何使用 Jest 模拟反应钩子？

Question

我有一个请求数据的组件。成功获取数据后应显示通知。出于这个原因，我们有一个名为 @my-company/notifications 的包（在纱线工作区中）。

import { useNotification } from '@my-company/notifications';

const ComponentWithDataFetching = () => {
  const {
    enqueueInfoNotification,
  } = useNotification();
  const {
    data,
  } = useQuery({
    onCompleted: () => {
      enqueueInfoNotification({ message: 'Data successfully fetch' });
    },
  })
}

我想测试一下

import { useNotification } from '@my-company/notifications';
import { render, fireEvent, act, wait } from '@testing-library/react';

jest.mock('@my-company/notifications', () => ({
  useNotification() {
    return {
      enqueueInfoNotification: jest.fn(),
    };
  },
}));

describe('<ComponentWithDataFetching />', () => {
  it('should enqueue info notification', async () => {
    const { getByTestId } = render(
      <TestSuitWrapper>
        <ComponentWithDataFetching />
      </TestSuitWrapper>,
    );

    expect(useNotification).toBeCalled();
  });
});

测试运行时，会发生错误： Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

如果删除 jest.mock 测试开始时没有错误。如何模拟测试调用 enqueueInfoNotification 函数的反应钩子？

Answer 1

你可以做的是你可以模拟@mycompany/notifications模块，在测试中你可以实现它来返回一个名为enqueueInfoNotification的模拟函数并测试它是否被调用。但是你也应该模拟 useQuery ，你可以使用 apollo-react-tesing 包来做到这一点

import { useNotification } from '@mycompany/notifications';
import { render, fireEvent, act, wait } from '@testing-library/react';

jest.mock('@astral-frontend/notifications');

describe('<ComponentWithDataFetching />', () => {
  it('should enqueue info notification', async () => {
    useNotification.mockReturnValue({
       enqueueInfoNotification: jest.fn()
    });

    render(
      <TestSuitWrapper>
        <ComponentWithDataFetching />
      </TestSuitWrapper>,
    );

    expect(useNotification.enqueueInfoNotification).toBeCalled();
  });
});