How do you test an RTKQuery endpoint using jest.spyOn

Question

I'm trying to test RTKQuery that an endpoint has been called using jest.

I eventually want to also be able to mock what the return data will be, but first I wanted to just check that the hook had been called.

An example below where I am trying to spy on myApi for the useGetMyListQuery hook which is autogenerated.

This throws and error when it runs, can anyone help?

it('Should render', async () => {
    jest.spyOn(myApi, 'useGetMyListQuery')

    render(
      <Provider store={store}>
        <MyComponent />
      </Provider>
    )

    expect(myApi.useGetMyListQuery).toBeCalled()
})

Officer

Answer 1

I can't answer your questions on how to do this with jest mocking, but I hope I can give you some insights here nontheless - from the perspective of having written most of RTKQ and how I imagine it to be tested in a stable way:

I wouldn't use jest mocking. I would mock the API.

The reason for this being is that your mocks will assume certain return values from the RTKQ hook - and if your assumptions are wrong, you might have a nice green running test, but in reality your app will still fail.

An example of this would be using skip and not checking for isUninitialized - since that case will not come up if you are not using skip and you might just assume that you will only ever see isLoading, isSuccess and isError cases in your component. It's a perfectly valid assumption in many cases, but not always true. Mocking RTKQ would hide the resulting bug behind green tests.

Instead, I would recommend using something like mock service worker to just mock your api endpoints and let RTKQ do it's work. That is how we are testing RTKQ ourselved in our own tests - you are welcome to take a look there: RTKQ tests.

Lubra

Thank you for your comment, I had just come across MSW and was going to try this, so good to hear that RTKQ recommend this approach. – Officer

I have tried looking through the tests, but still can't see how I would wait to see if a certain API url has been called? Have you examples of this anywhere? – Officer

We use RTL to wait until the page has the contents we assume. If you test with React Testing Library, something like RTK Query becomes an implementation detail. Your API was obviously called because data from your api is on screen, visible to the user - but how it got there exactly is not of any concern. – Lubra

Answer 2

I was able to use vitest spyOn with RTKQuery hooks. I had to add * import with name to test file and then I could use the spy on with import name & hook name:

import * as useGetMyListQuery from 'api/myListApi';

...

const spyAPIcall = vi.spyOn(useGetMyListQuery, 'useGetMyListQuery');
render(<MyList />);
expect(spyAPIcall).toHaveBeenCalledTimes(1);

Minotaur

Answer 3

If You are going to use spyOn Firstable you should create jest.mock()

import { companyAPI } from '../../../services/CompanyService'



jest.mock('../../../services/CompanyService', () => {
    const originalModule = 
    jest.requireActual('../../../services/CompanyService');
    return {
        ...originalModule,
        companyAPI: {
           ...originalModule.companyAPI,
           useGetCompanyQuery: jest.fn(),
        },
    };
});

test('should display Points Page Content', async () => {
    // Spying on useGetCompanyQuery
    const useGetCompanyQuerySpy = jest.spyOn(companyAPI, 
    'useGetCompanyQuery');
    // Mock the return value of useGetCompanyQuery
    useGetCompanyQuerySpy.mockReturnValue({
    data: {
        company_id: '8b5d23a5-52be-4098-bd47-0918b0d130b6',
        company_name: 'FOP Storozhuk',
        created: '2023-08-31T10:44:06.692Z',
    },
    error: null,
    isLoading: false,
});

render(...

You need to mock useGetCompanyQuery cause it is not exist in your test Redux creates a hook on the fly

Swell