从 Jest 中的第 3 方库模拟自定义挂钩

Question

I am using a custom hook from 3rd party library in my React project:

import { useProductData } from '@third/prod-data-component';

const ProductRow: React.FC<MyProduct> = ({ product }) => {
  // using the custom hook here
  const productData = useProductData();
})

The signature of that hook function is:

export declare const useProductData: () => string | undefined;

In my jest test, I would like to mock the returned value of the hook, I tried:

it('should show correct product data', ()=>{
   jest.mock('@third/prod-data-component', () => {
      return { useProductData: jest.fn(()=>'foo')}
   });
   ...
   ...
})

When I run test, the above mock doesn't take any effect.

How to mock the return value of custom hook that is from a 3rd party library?

==== UPDATE ====

I also tried this:

jest.mock('@third/prod-data-component', () => {
            const lib = jest.requireActual('@third/prod-data-component');
            return {...lib, useProductData: () => 'foo'}
        });

But does't work either.

Answer 1

can you try this

import {useProductData} from '@third/prod-data-component'

jest.mock('@third/prod-data-component');

(useProductData as jest.Mock).mockImplementation(() => {mockKey: 'mockData'})

describe('test scenario', () => {
  it('should show correct product data', () => {
    // your assertions
  })
})

Answer 2

Reading your example, you may be missing the actual module import.

However, have you tried the full module mocking ?

import moduleMock from '@third/prod-data-component'

jest.mock('@third/prod-data-component')

describe('test scenario', () => {
  it('should show correct product data', () => {
    moduleMock.useProductData.mockReturnValue(...)
  })
})

EDIT

I missed the Typescript part. You need to wrap the actual module type definitions with Jest's own type definitions.

I solved this problem in the past in the following way, using jest.mocked function:

import prod_data_component_module from '@third/prod-data-component'

jest.mock('@third/prod-data-component')

describe('Your test case scenario', () => {
  const mock = jest.mocked(prod_data_component_module, { shallow: true })

  it('Your test here', async () => {
    mock.useProductData.mockReturnValue('...')

    // test logic here
  })
})

mock is a jest wrapper of the original module. It is of type jest.MockedFn<T> , so it contains actual exported types/functions and also jest mocks.