msw: Axios never receives response object

Looking to integrate msw into our testing, using serverSetup in our jest tests, and feel like I must be missing something simple. I’ve setup my handlers, and can log my request coming into the resolve. However, that response never seems to make it to Axios, so the mock response never makes it to my interface. No response is received, no error is thrown, just…nothing

Environment

  • msw: 0.17.0
  • nodejs: 10.14.0
  • npm: 6.13.4
  • axios: 0.19.2

I’m running these tests via jest in a VS Code Terminal on a 2019 MacBook Pro (latest VS Code)

To Reproduce

I have setup a super simple test

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import axios from 'axios';

describe('Axios test', () => {
  const handlers = [
    rest.get('/health/PeopleManagement/api/Person', (req, res, ctx) => {
      console.log('in request');
      return res(
        ctx.json({
          total: 0,
          data: [],
          count: 0,
        })
      );
    }),
  ];
  const server = setupServer(...handlers);

  beforeAll(() => server.listen());
  afterAll(() => server.close());

  it('should make a call for data', async () => {
    try {
      const types = await axios.get('/health/PeopleManagement/api/Person');
      console.log('types ', types);
    } catch (err) {
      console.error(err);
    }
  });
});

Expected behavior

You expect to see the console.log from the handler, that the call would resolve, and that types would now be the simple object and output to the console (or at least an error in the catch)

Current behavior

Instead, what you see is the console.log from the handler (we made it to the handler), followed by this error:

Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error

Axios

Under the hood, axios (in a node execution context like this) uses either http or https for it’s transport, depending on the url protocol involved. It does this via this adapter.

Final Bit

Not sure what I’m doing wrong here. Do I require a custom request handler of some sort? Custom context? Been hammering away for a few hours now, and just getting nowhere…

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 22 (10 by maintainers)

Most upvoted comments

Hey guys, I’m facing the same problem, any news about it?

Hi all, I am experiencing this same issue with msw@0.19.0, but it works when I revert to msw@0.17.1. It seems that there may be a regression of this bug.

Sorry guys, was on holiday. Yes, msw@0.17.1 does now appear to working with axios.

@kettanaito I have updated the tester to use msw@0.17.1 https://github.com/andreawyss/msw-tester Everything works now. Thank you!

I have also added instructions on how to run msw-tester with https, since one needs a valid SSL certificate to use msw with https.

Running msw with an invalid SSL certificate may can cause cryptic errors like the one in issue #157

node-request-interceptor test/response/axios.test.ts works on my machine.

@kettanaito I have created this tester project that you can use to reproduce the axios vs. fetch issue. https://github.com/andreawyss/msw-tester npm i npm run test fetch works but axios does NOT work. npm start fetch and axios both work in the browser.