GET requests not intercepted using RTK Query on React Native

[martinbartolo]

I'm working on a React Native project with RTK Query and I'm trying to mock my API calls using MSW. I've set up MSW and it's working fine for POST and PATCH requests, but it's not intercepting GET requests.

Here is my jest config

/** @type {import('jest').Config} */
const config = {
  preset: 'react-native',
  setupFiles: [
    './node_modules/react-native-gesture-handler/jestSetup.js',
    './msw.polyfills.ts',
  ],
  setupFilesAfterEnv: ['./test/setup.ts'],
  transformIgnorePatterns: ['node_modules/(?!react-redux)/'],
};

module.exports = config;

Here is my jest setup

import { cleanup } from '@testing-library/react-native';
import '@testing-library/react-native/extend-expect';
import { setupServer } from 'msw/native';

export const server = setupServer();

beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
  cleanup();
});

afterAll(() => {
  server.close();
});

Here is my MSW handler

export const legalHandlers = [
  http.get('https:api-base-url/legal/tos', () => {
    return HttpResponse.json({
      policy: 'This is the terms of service.',
      version: '1.0.0',
      date: '2022-01-01',
    });
  }),
];

Here is my RTK Query API

import { baseApi as api } from './baseApi';
const injectedRtkApi = api.injectEndpoints({
  endpoints: build => ({
    getLegalTos: build.query<GetLegalTosApiResponse, GetLegalTosApiArg>({
      query: () => ({ url: '/legal/tos' }),
    }),
    // ...
  }),
  overrideExisting: false,
});
export { injectedRtkApi as legalApi };

I'm using the useGetLegalTosQuery hook to call the API in my react component

export function TermsOfServiceScreenContent({
  onGoBack,
  onError,
}: TermsOfServiceScreenContentProps) {
  const { data: termsOfService, isLoading, isError } = useGetLegalTosQuery();

  // ...
}

This is my test

  it('displays the terms of service', async () => {
    server.use(...legalHandlers);
    const { getByText, getByTestId } = renderScreen();

    const loadingIndicator = getByTestId('tos-loading');
    expect(loadingIndicator).toBeOnTheScreen();

    await waitFor(() => {
      const tos = getByText('This is the terms of service.');
      expect(tos).toBeOnTheScreen();
    });

    expect(loadingIndicator).not.toBeOnTheScreen();
  });

When I run the test, the GET request to /legal/tos is not intercepted by MSW and I get the warning

console.warn
    [MSW] Warning: intercepted a request without a matching request handler:

      • GET https://api-base-url/legal/tos

    If you still wish to intercept this unhandled request, please create a request handler for it.
    Read more: https://mswjs.io/docs/getting-started/mocks

      at Object.warn (node_modules/msw/src/core/utils/internal/devUtils.ts:17:11)
      at warn (node_modules/msw/src/core/utils/request/onUnhandledRequest.ts:44:18)
      at applyStrategy (node_modules/msw/src/core/utils/request/onUnhandledRequest.ts:79:3)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12
      at apply (node_modules/msw/src/core/utils/request/onUnhandledRequest.ts:80:1)
      at apply (node_modules/msw/src/core/utils/request/onUnhandledRequest.ts:20:23)
      at node_modules/msw/src/core/utils/handleRequest.ts:85:11
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

Am I missing a step in my set-up here or am I doing something wrong?

[Hiba-Bazerbashi]

did you figure it out ? @martinbartolo , I'm having the same issue

[martinbartolo]

Hi, I eventually ended up figuring it out but it's been quite a while so unfortunately I don't remember the steps I took to solve the problem. My setup is still the same as the one I sent above so the problem must have been somewhere else.

[Hiba-Bazerbashi]

thanks for your reply @martinbartolo . could you please show me the msw.polyfills.ts file, and if you coincidently remembered what the problem was ,please mention it to me .