How to test RTK Query with react testing library?

Question

I'm trying to work with RTK Query, but can't find a good example of how to write unit tests with react testing library for a component that uses requests with RTK Query. For example, we have a component that gets a list of something from server. How do mock data for requests? I found a solution to use mswjs for mocking API for tests. But even with it, I have a problem - I need to add await new Promise((r) => setTimeout(r, 1000)); before I'll check that something from the collection exists. Maybe, somebody knows how to test components with RTK Query?

small updates - await new Promise((r) => setTimeout(r, 1000)); don't needed because of waitForElementToBeRemoved to await remove loader. But maybe somebody has examples of unit testing components with RTK Query — Denis, Jun 03 '22 at 16:26
Please provide enough code so others can better understand or reproduce the problem. — Community, Jun 03 '22 at 19:56

score 12 · Accepted Answer · answered Jun 03 '22 at 17:15

You can take a look at the tests of RTK Query itself.

Some things:

use msw to mock an api
wrap your component in a real Redux store with your api (storeRef.wrapper in the example)
use something to wait for UI changes like

      await waitFor(() =>
        expect(screen.getByTestId('isFetching').textContent).toBe('false')
      )

score 5 · Answer 2 · answered Jun 21 '22 at 12:40

5

An alternative I have found is mocking the rtk query hooks themselves. Then you can set anything you want for the data object.

jest.mock('pathToHook', () => ({
  __esModule: true,
  default: () => () => { data: 'whatever you want' },
}))

answered Jun 21 '22 at 12:40

Sebastian Golbert

59
1

3

but what pathToHook would look like if we're talking about a default hook generated by RTK? – sergioviniciuss Sep 15 '22 at 08:16

score 2 · Answer 3 · answered Mar 07 '23 at 10:50

You should be able to do something like this.

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useGetData } from './api'; // RTK Query API

import MyComponent from './MyComponent';

jest.mock('./useGetData');

describe('MyComponent', () => {
  beforeEach(() => {
    useGetData.mockClear();
  });

  it('should render data after API request', async () => {
    const mockData = {
      id: 1,
      name: 'John Doe',
      email: 'johndoe@example.com'
    };
    useGetData.mockReturnValueOnce({
      data: mockData,
      isLoading: false,
      isSuccess: true,
      isError: false,
      error: null,
    });

    render(<MyComponent />);

    // Check that loading state is not displayed
    expect(screen.queryByText('Loading...')).toBeNull();

    // Check that data is displayed correctly
    expect(screen.getByText('Name: John Doe')).toBeInTheDocument();
    expect(screen.getByText('Email: johndoe@example.com')).toBeInTheDocument();
  });
});

In this example, we are testing that MyComponent correctly displays data after a successful useGetData hook call. We simulate the useGetData hook by mocking it using jest.mock and setting up a mock return value using useGetData.mockReturnValueOnce. Then, we render the component and verify that the loading state is not displayed and that the data is correctly displayed using expect statements. It's worth noting that we don't need to wait for an API request to complete, as useGetData already returns the data we wish to test.

```const hookMocked = jest.fn(); jest.mock('path-to-the-module-you-want-to-mock', () => ({ hookThatYouWantToMock: () => hookMocked(), })); ``` Then you can use mockClear() inside beforeEach() and mockReturnValueOnce() inside the tests :) — Bozhidar Petrov, Jul 04 '23 at 14:10
What about mocking a mutation or a lazy query how could you do it ? — augusticor, Aug 15 '23 at 21:38

How to test RTK Query with react testing library?

3 Answers3