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()
})

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()
})

• javascript
• testing
• redux
• redux-toolkit
• rtk-query

3 Answers 3

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 e 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 ponent. 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 remend 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 wele to take a look there: RTKQ tests.

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);

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

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



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

test('should display Points Page Content', async () => {
    // Spying on useGetCompanyQuery
    const useGetCompanyQuerySpy = jest.spyOn(panyAPI, 
    'useGetCompanyQuery');
    // Mock the return value of useGetCompanyQuery
    useGetCompanyQuerySpy.mockReturnValue({
    data: {
        pany_id: '8b5d23a5-52be-4098-bd47-0918b0d130b6',
        pany_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