Jest returns "Network Error" when doing a mock request with axios and msw

Question

I have been using msw and axios to test my APIs in front end (node-typescript). The APIs return valid responses when I access them through Postman. The jest test for testing the GET API is

server = setupServer(...mocks)

server.use(
  
  rest.get(sampleUrl, (req, res, cx) => {
    return res.once(sampleResponse)})
);

server.printHandlers(); // on printing handlers, I see the sampleUrl printed

const features = await sampleMethod(param1);

expect(features).toEqual(sampleResponse);

On executing the above(only for a particular API) I seem to get this error

[MSW] Error: captured a request without a matching request handler:

  • GET sampleUrl

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

The full exception is:

AxiosError {
  message: 'Network Error',
  name: 'AxiosError',
  code: 'ERR_NETWORK',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: xhrAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: { Authorization: 'Sample Bearer auth...' },
    method: 'get',
    url: 'sampleUrl',
    data: undefined
  },
  request: XMLHttpRequestOverride {
    _events: [],
    UNSENT: 0,
    OPENED: 1,
    HEADERS_RECEIVED: 2,
    LOADING: 3,
    DONE: 4,
    onreadystatechange: null,
    onabort: [Function: handleAbort],
    onerror: [Function: handleError],
    onload: null,
    onloadend: [Function: onloadend],
    onloadstart: null,
    onprogress: null,
    ontimeout: [Function: handleTimeout],
    url: 'sampleUrl',
    method: 'GET',
    readyState: 0,
    withCredentials: false,
    status: 200,
    statusText: 'OK',
    data: '',
    response: null,
    responseType: 'text',
    responseText: null,
    responseXML: null,
    responseURL: '',
    upload: null,
    timeout: 0,
    _requestHeaders: HeadersPolyfill { _headers: [Object], _names: [Map] },
    _responseHeaders: HeadersPolyfill { _headers: {}, _names: Map(0) {} },
    async: true,
    user: undefined,
    password: undefined
  },
  response: XMLHttpRequestOverride {
    _events: [],
    UNSENT: 0,
    OPENED: 1,
    HEADERS_RECEIVED: 2,
    LOADING: 3,
    DONE: 4,
    onreadystatechange: null,
    onabort: [Function: handleAbort],
    onerror: [Function: handleError],
    onload: null,
    onloadend: [Function: onloadend],
    onloadstart: null,
    onprogress: null,
    ontimeout: [Function: handleTimeout],
    url: 'sampleUrl',
    method: 'GET',
    readyState: 0,
    withCredentials: false,
    status: 200,
    statusText: 'OK',
    data: '',
    response: null,
    responseType: 'text',
    responseText: null,
    responseXML: null,
    responseURL: '',
    upload: null,
    timeout: 0,
    _requestHeaders: HeadersPolyfill { _headers: [Object], _names: [Map] },
    _responseHeaders: HeadersPolyfill { _headers: {}, _names: Map(0) {} },
    async: true,
    user: undefined,
    password: undefined
  }
}

When I use a different API, the test works as expected.The test fails only for a particular GET API.

Perhaps try adding a wildcard: `'*/sampleUrl` – Cathal Mac Donnacha Oct 06 '22 at 23:34 — Cathal Mac Donnacha, Oct 06 '22 at 23:34

score 1 · Answer 1 · answered Jan 06 '23 at 06:05

I know this is coming in a bit late, but was having the same problem, and thought I'd share what I realised.

Is sampleResponse in your rest res.once the correct format? You need to make sure you're using the correct ctx context formats, e.g. you may want something like

server.use(
  rest.get(sampleUrl, (req, res, ctx) => {
    return res.once(ctx.status(200), ctx.json(sampleResponse));
  })
);

See the msw docs for more examples of how you should use context.

Jest returns "Network Error" when doing a mock request with axios and msw

1 Answers1