如何模拟useSWRConfig实现

Question

有没有一种方法可以在Jest测试中从SWR模拟useSWRConfig钩子的实现？

import useSWR, { useSWRConfig } from 'swr';
it('should mutate', () => {
const mutation = jest.fn();
useSWR.mockImplementationOnce(() => ({ error: true })); // this works
useSWRConfig.mockImplementationOnce(() => ({ mutation })); // TypeError: _swr.useSWRConfig.mockImplementationOnce is not a function
expect(mutation).toHaveBeenCalled(); // not working
});

文档：https://swr.vercel.app/docs/mutation

Answer 1

您可以自动锁定swr模块，以便在useSWRConfig上调用类似mockImplementationOnce的mock函数。

假设您有以下React组件。

import React from 'react'
import { useSWRConfig } from 'swr'
export default function TestComponent() {
const { mutate } = useSWRConfig()
return (
<button onClick={() => { mutate('/api/user') }}>
Mutate
</button>
)
}

您将在测试中模拟useSWRConfig及其mutate函数，如下所示。

import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { useSWRConfig } from 'swr'
import TestComponent from '@/components/test-component'
jest.mock('swr') // Automock `swr` lib
test('mutate is called', () => {
const mutateMock = jest.fn()
useSWRConfig.mockImplementationOnce(() => ({ mutate: mutateMock })) // Make sure you mock `mutate` and not `mutation`
// Using react-testing-library, but any other testing lib could be used
render(<TestComponent />)
fireEvent.click(screen.getByRole('button', { name: 'Mutate' }))
expect(mutateMock).toHaveBeenCalledWith('/api/user')
})