Question about properly using MSW within jest with redux rtk query's

[reqyou]

Hi everyone,
I am struggling setup a proper test environment with MSW and I would appreciate any kind of help here.

I am using react, redux toolkit, rtk queries, openapi and I would like to integration test the API with jest.

I extracted the business logic from the component using hooks. One part of the exported methods contains an api request. This Is the part I would like to have an integration test for. I set up the server, set my handle and run the test which is ending up "Exceeded timeout of 5000 ms for a test". It looks like that MSW isn't intercepting the request.

I put part of the code below, to get a better understanding of problem.

Does anyone have an Idea, what's the Issue here? Is it because I am using renderHook instead of a classic render?

Many thanks!!

Best req

// businessLogic.hooks.ts

export const useMyBusinessLogic = () => { 
  const [startRequest] = useStartMutation();
  const dispatch = useAppDispatch();

  return: {
    handleActions: (id: string) => {
     [ ... ]
     startRequest({id: id}).then((value) => dispatch(updateState(value)));
     [ ... ]
     }}
}

// server

export const handlers = [
  rest.put('/api/v1/data/:id/start', (req, res, ctx) => {
    return res(ctx.json('done'), ctx.delay(150));
  })
];

const server = setupServer(...handlers);

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

// renderHook Wrapper

export const Wrapper = ({ children }) => (
    <ThemeProvider>
      <Provider store={store}>
        <IntlProvider locale='en'>{children}</IntlProvider>
      </Provider>
    </ThemeProvider>
);

// test

test('hook api resolve', async () => {
    const { result } = renderHook(useMyBusinessLogic, { wrapper: Wrapper });

    let response;
    await act(
      () => (response = result.current.handleActions('123'))
    );
    expect(response).resolves.toBe('done');
});

[reqyou]

anyone? 🌹

[michael-harrison]

To help diagnose the issue I would recommend adding the onUnhandledRequest option as follows

beforeAll(() => server.listen({onUnhandledRequest: 'error'}))