Network error with Axios in Jest tests with MSW 2.x

[chawax]

Hi,

I try to migrate a project from 1.x to 2.x but I have tests failing with 2.x because of "Network Error".

The Axios call that causes the problem :

axios.post(
  "/oauth/web-module",
  new URLSearchParams({ accessCode: username, password: password, grant_type: "password" })
);

The way I mock it with MSW :

    http.post("/oauth/web-module", async () => {
      return new HttpResponse(null, { status: 200 });
    }),

I have no network error when I call Axios will null as body.

axios.post(
  "/oauth/web-module",
  null
);

So it looks like from 2.x MSW can't map this request with the mocks. I thought the mapping was made from url and HTTP verb. Something changed on this with v2.x ?

[PadgetPII]

I believe you can fix it using this syntax :

  http.post("/oauth/web-module", () => {
    return HttpResponse.error();
  })

It will automatically cause a Network Error.

[chawax]

My problem is not throwing Network Error, my problem is having Network error from Axios while I should not.

[kettanaito]

Hi, @chawax. No, nothing has changed in regards to request mapping.

Can you please submit a reproduction repository for this? I then would be able to help you solve this issue. I'm rather certain it's a configuration issue on your end (missing base URL for Axios, for example). I don't rule out the possibility of an issue in MSW either.

[agnesmeri-olio]

Hi all,

I'm experiencing the same issuee. Trying to migrate to msw 2 and all the axios calls in my jest+testing-library tests, that would fetch data, are erroring. There might be something around the response body mapping.

I needed to extend the polyfill found in the migration docs, so I don't get a ReadableStream error.

const { Blob, File } = require('node:buffer')
const { TextDecoder, TextEncoder, ReadableStream } = require('node:util')

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
})

const { fetch, Headers, FormData, Request, Response } = require('undici')

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
})

added these 2 bits to my jest config:

  testEnvironmentOptions: {
    customExportConditions: [''],
  },
  
  setupFiles: ['./jest.polyfills.js'],

example handler function:

const api_v1_materials = ({ responseBodyOverride } = {}) => {
  return http.get('/api/v1/materials', () => {
    return HttpResponse.json(responseBodyOverride ?? documents, {
      headers: {
        'Content-Type': 'application/json',
      },
    })
  })
}

I tried with and without setting the Content-Type header but it makes no difference.

msw 2.0.11, node 18

Would love to put together an example code, but I'm not sure I'll have the time it's a work project.

Thanks for looking into it :)

[agnesmeri-olio]

Axios error:

AxiosError {
      message: 'Network Error',
      name: 'AxiosError',
      code: 'ERR_NETWORK',
      config: {
        transitional: {
          silentJSONParsing: true,
          forcedJSONParsing: true,
          clarifyTimeoutError: false
        },
        adapter: [ 'xhr', 'http' ],
        transformRequest: [ [Function: transformRequest] ],
        transformResponse: [ [Function: transformResponse] ],
        timeout: 0,
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN',
        maxContentLength: -1,
        maxBodyLength: -1,
        env: { FormData: [Function], Blob: [class Blob] },
        validateStatus: [Function: validateStatus],
        headers: Object [AxiosHeaders] {
          Accept: 'application/json, text/plain, */*',
          'Content-Type': null
        },
        method: 'get',
        url: '/api/v1/materials',
        signal: AbortSignal {},
        data: undefined
      },
      request: XMLHttpRequest {
        open: [Function: open],
        setRequestHeader: [Function: setRequestHeader],
        send: [Function: send],
        abort: [Function: abort],
        getResponseHeader: [Function: getResponseHeader],
        getAllResponseHeaders: [Function: getAllResponseHeaders],
        overrideMimeType: [Function: overrideMimeType],
        onreadystatechange: [Getter/Setter],
        readyState: 4,
        timeout: [Getter/Setter],
        withCredentials: [Getter/Setter],
        upload: [Getter],
        responseURL: [Getter],
        status: [Getter],
        statusText: [Getter],
        responseType: [Getter/Setter],
        response: [Getter],
        responseText: [Getter],
        responseXML: [Getter],
        UNSENT: 0,
        OPENED: 1,
        HEADERS_RECEIVED: 2,
        LOADING: 3,
        DONE: 4
      }
    }

[agnesmeri-olio]

response body I'm trying to get through is something like this:

const documents = [
  {
    id: 0,
    name: 'Some agreement',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
   },
   {
    id: 1,
    name: 'Some other agreement',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
   },
 ]

[maximsht]

Hello!
I have the same problem.
If the fetch function is defined with payload it is never intercepted. If I rewrite the function excluding payload from it, msw intercepts the request as expected.
For fetching I use Axios. Axios spawns NETWORK ERROR.
I'm on msw 2.0.11

[Nash171]

I'm experiencing the same issue too.
msw - 2.0.11
axios - 1.6.0

[LuizKrlz]

I have the same issue too.
For me, in the browser is working correctly, but when I use node/jest for tests, it is not working.
msw - 2.0.11
axios - 1.6.3

[Atin-Peoplefluent]

Same issue (Network error) for post calls .

[MaksZhukov]

Same issue

[DeividZavala]

same issue, i think this should be in the issues section

msw: v2.0.11
axios: v1.6.5
node: v18.18.2

[ptsiakos77]

I had the same error with axios msw2 and jest and it was solved by using the jest config of @agnesmeri-olio but downgrading undici to v5 from v6
"undici": "^5.0.0",

[chawax]

Tried with Node 18, Node 20, same problem.

[ptsiakos77]

@chawax Maybe the problem is how you pass the query params in the axios post, This should the third argument in the post like

axios.post(
"/oauth/web-module", null, params: { accessCode: username, password: password, grant_type: "password" });

Then in the msw 2 handler you can access them like

http.post("/oauth/web-module", ( {request} ) => {
const url = new URL(request.url)
const accessCode = url.searchParams.get('accessCode')
return new HttpResponse(null, { status: 200 });
}),

I would try this with v5 undici

An additional question is do you have the same problem on mapping post requests with body or only in this case where the body consists of URLSearchParams?

[iudin]

Yes, it works for me! undici v5.26.2

[chawax]

I found why it didn't work for me ! The project I work in used @happy-dom instead of jsdom-jest-environment (don't know why !). Using jsdom-jest-environment, donwgrading undici and adding Jest polyfills as suggested solved my problem. But I definitely think about moving to vitest, too many problems when using Vite and Jest recently.

[GabrielBursi]

it works for me, thanks!

[piyushchauhan2011]

Is there a way to use something else apart from undici in jest.polyfills.js ?

[ptsiakos77]

@piyushchauhan2011 Currently from the documentation this seems the only way, since msw v2 uses the fetch api which is not available in Jest environment. This commonly happens in Jest because it intentionally robs you of Node.js globals and fails to re-add them in their entirely, therefore you should use undici which is the default implementation of the fetch API in node environment.

[piyushchauhan2011]

For now I'm continuing to use the recommended way, we are eventually thinking of migrating to vitest instead of continuing to use jest

[kimcodesjs]

I was experiencing the same issue - making sure the correct Node version is installed and downgrading undici, along with the polyfill / jest config updates mentioned above worked for me!

[kettanaito]

Solution

See this for the recommended solution.

[eteterra-formus]

In case it helps anyone else: I was seeing network errors when I shouldn't with msw2 and vitest.

turns out that I forgot to import HttpResponse from msw, as soon as I added the import everything worked as expected.

[fahadAziz44]

I had the same error with axios msw2 and jest and it was solved by using the jest config of @agnesmeri-olio but downgrading undici to v5 from v6 "undici": "^5.0.0",

I had the same error with axios msw2 and jest and it was solved by using the jest config of @agnesmeri-olio but downgrading undici to v5 from v6 "undici": "^5.0.0",

Hey Folks, for understanding the purpose and to be confident in adopting this solution. Can someone explain why [email protected] is working for some people and, for others, [email protected] is working fine?

[Limuyang1013]

meet same issue when use msw2 with axios and jest

[benerhan]

Just in case someone is running into the same problem - although I'm not using JEST, but vitest...

The following code throws an error, BECAUSE the axios call is made in directly in "describe".
Adding the it call (just uncommenting in the example below) makes the error go away.

import { expect, it, describe } from "vitest";
import axios from "axios";

describe("testing axios network error", async () => {
  //it("makes the error go away", async () => {
    await axios.get("http://localhost:8000/components/de/urls");
    expect(true).toBe(true);
  //});
});