Jest tests failed after upgrading axios to v1.1.2 #5101

imransilvake · 2022-10-11T14:28:50Z

Describe the bug

I updated the Axios from "axios": "^0.27.2" to "axios": "^1.1.2", and Jest tests are not working anymore with the following error:

FAIL src/app/slices/app/App.slice.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/imrankhan/Development/roc/node_modules/axios/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import axios, { AxiosRequestConfig } from 'axios';
        | ^
      2 |
      3 | class HttpClientService {
      4 |       /**

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/app/services/http-client/HttpClient.service.tsx:1:1)

To Reproduce

Use React and Axios latest version
Create Jest test
Run the test to generate the error

Environment

Axios Version ^v1.1.2
Browser Chrome
Browser Version Version 105.0.5195.125 (Official Build) (x86_64)
Node.js Version v18.4.0
OS: MAC OS 12.4
React: ^18.2.0

Temporary Fix

The following fix works for now but I expect a standard fix for this issue.

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

or

"test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

The text was updated successfully, but these errors were encountered:

lejahmie · 2022-10-11T20:32:13Z

For context: Problem seem to be that Axios is now built as ES Module instead of CommonJs when not run in Node. Problem with Jest is that it runs code in Node, but application is built for web-clients.
This is why telling Jest to transform Axios works.

pzi · 2022-10-12T00:24:12Z

See #5026

rathpc · 2022-10-12T01:02:04Z

The change to transformIgnorePatterns does not work in my case so I am hoping there is a proper fix provided from axios soon.

hisuwh · 2022-10-12T15:20:02Z

yh transformIgnorePatterns "fix" is not working for me

rathpc · 2022-10-12T18:28:58Z

I found that this did however work for me because it forces those imports to resolve with the CJS module instead:

  moduleNameMapper: {
    '^axios$': require.resolve('axios'),
  },

rd-stefan-riehmer · 2022-10-14T11:51:45Z

@rathpc - i tried your solution.
outcome:
jest test: mocking with jest.mock('axios') works again
the app (called from jest): the library axios is imported and it's value is undefined and therefore i get an error => e.g. Cannot read properties of undefined (reading 'get')

zntemel · 2022-10-22T11:27:37Z

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\""

this worked, when I restart test command

tanthuann · 2022-10-24T04:01:18Z

I found that this did however work for me because it forces those imports to resolve with the CJS module instead:
  moduleNameMapper: {
    '^axios$': require.resolve('axios'),
  },

Thank you!
This is work for me, not transformIgnorePatterns

pzi · 2022-10-26T01:28:45Z

Try upgrading jest to latest (>29.2.x), it worked for me without having to change jest config.

single9 · 2022-10-28T07:25:38Z

Try upgrading jest to latest (>29.2.x), it worked for me without having to change jest config.

You save my time!

nskazki · 2022-10-29T23:46:01Z

Works for me:

moduleNameMapper: {
    'axios': 'axios/dist/node/axios.cjs'
}

…eNameMapper to workaround axios/axios#5101 Signed-off-by: Gavin Reynolds <greynolds@pagerduty.com>

kurund · 2022-11-04T11:37:34Z

Works for me:

moduleNameMapper: {
    'axios': 'axios/dist/node/axios.cjs'
}

Thank you. This worked for me

dhruvsakariya · 2022-11-06T16:00:48Z

Describe the bug

I updated the Axios from "axios": "^0.27.2" to "axios": "^1.1.2", and Jest tests are not working anymore with the following error:

FAIL src/app/slices/app/App.slice.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/imrankhan/Development/roc/node_modules/axios/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import axios, { AxiosRequestConfig } from 'axios';
        | ^
      2 |
      3 | class HttpClientService {
      4 |       /**

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/app/services/http-client/HttpClient.service.tsx:1:1)

To Reproduce

Use React and Axios latest version
Create Jest test
Run the test to generate the error

Environment

Axios Version ^v1.1.2
Browser Chrome
Browser Version Version 105.0.5195.125 (Official Build) (x86_64)
Node.js Version v18.4.0
OS: MAC OS 12.4
React: ^18.2.0

Temporary Fix

The following fix works for now but I expect a standard fix for this issue.

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

or

"test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

Thank You it worked

Any permanent solution Found ??

MatVD · 2022-11-08T17:08:31Z

"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",

Thanks... it works well for me

dhruvsakariya · 2022-11-08T17:10:20Z

Your welcome I think Issue is in Axios .

…

On Tue, Nov 8, 2022, 10:38 PM MatVD ***@***.***> wrote: "test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"", Thanks... it works well for me — Reply to this email directly, view it on GitHub <#5101 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUUNFPEJE2EHS6XYJ6ARCJDWHKCJZANCNFSM6AAAAAARCLFFFE> . You are receiving this because you commented.Message ID: ***@***.***>

AyoubXwire · 2022-11-08T21:56:16Z

Thanks, this works:
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",

You can also do it this way:
add this jest config to your package.json

"jest": {
    "transformIgnorePatterns": ["node_modules/(?!axios)/"]
},

and you can keep the npm test script as it was before:
"test": "react-scripts test",

jasonsaayman · 2022-11-10T19:24:12Z

Hi 👋

Please try the latest pre-release by running the following:

npm i axios@1.2.0-alpha.1

Please provide feedback in either the pinned issue or the discussion thread 🧵

ref: axios/axios#5101 (comment)

OVO-Josh · 2022-12-12T13:30:11Z

@KonradLinkowski oh whoops 😅. Yeah we should probably have one of them opened

ventralnet · 2022-12-20T18:49:11Z

Just leaving this here. Here is a blurb from the JEST documentation why you have to include axios in transforming/transpiling. By default JEST ignores node_modules/*

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled code. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to allow transpiling such modules. You'll find a good example of this use case in React Native Guide.

ventralnet · 2022-12-20T18:56:34Z

Yet further useful information why Jest is transpiling
https://jestjs.io/docs/code-transformation

77pintu · 2022-12-29T11:31:00Z

Finally, the issue is resolved I updated the latest jest version --->npm install --save-dev jest@29.3.1

another way this also working
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/""

this worked when I restarted the test command

Add the Axios package to connect to the API so we can get data from the 'dev.to' API. Currently, the latest version of Axios, v1.1.2, does not work with Jest, so we are staying with v0.27.2. Ref: https://axios-http.com axios/axios#5101 (comment)

LiviuSosu · 2023-01-01T16:20:33Z

I found that this did however work for me because it forces those imports to resolve with the CJS module instead:
  moduleNameMapper: {
    '^axios$': require.resolve('axios'),
  },

Up from me ;-)

…e in axios/axios#5101, then update pact to fix pact-foundation/pact-js#606, and move dev dependencies to dev scope.

SalahAdDin · 2023-01-26T15:17:05Z

No any of the solutions given here gave us a proper solution, we are working with the 1.2.5 version.

See axios/axios#5101

Versions of Axios 1.x are causing issues with Jest (axios/axios#5101). Jest 28 and 29, where this issue is resolved, has other issues surrounding memory leaks (jestjs/jest#7874). Allow `>=0.25.0` for applications that cannot upgrade Jest at this moment.

imransilvake · 2023-02-06T15:56:36Z

Checked on "axios": "^1.3.2" still not fixed (without --transformIgnorePatterns) !!

arpitha-jaanaki · 2023-02-10T07:44:11Z

HI @imransilvake did u not faced error like "options must be an object error" with latest version of axios?

AXIOS VERSION used

"axios": "^1.3.2",
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",

axiosservice.js file looks like below

import axios from 'axios';
import { qs, parse, stringify } from 'qs';
const buildInfoFilePath = '/system/buildInfo.json';

class AxiosService {
instance = axios.create({
paramsSerializer: {
encode: parse,
serialize: stringify
}
});

none of the solution worked for me .

can u please guide me what exactly fixed your issue, and how your axios service.js file looks like

Advance
thanks

imransilvake · 2023-02-12T18:48:36Z

HI @imransilvake did u not faced error like "options must be an object error" with latest version of axios?

AXIOS VERSION used

"axios": "^1.3.2", "test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",

axiosservice.js file looks like below

import axios from 'axios'; import { qs, parse, stringify } from 'qs'; const buildInfoFilePath = '/system/buildInfo.json';

class AxiosService { instance = axios.create({ paramsSerializer: { encode: parse, serialize: stringify } });

none of the solution worked for me .

can u please guide me what exactly fixed your issue, and how your axios service.js file looks like

Advance thanks

No, I didn't.
My axios service contains get, put, post and delete methods such as:

	/**
	 * GET
	 * @param url
	 * @param config
	 */
	get = async <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {
		const resp = await axios.get(url, config);
		return resp.data as T;
	};

that worked for me:

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

SalahAdDin · 2023-02-12T20:52:21Z

HI @imransilvake did u not faced error like "options must be an object error" with latest version of axios?
AXIOS VERSION used
"axios": "^1.3.2", "test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",
axiosservice.js file looks like below
import axios from 'axios'; import { qs, parse, stringify } from 'qs'; const buildInfoFilePath = '/system/buildInfo.json';
class AxiosService { instance = axios.create({ paramsSerializer: { encode: parse, serialize: stringify } });
none of the solution worked for me .
can u please guide me what exactly fixed your issue, and how your axios service.js file looks like
Advance thanks

No, I didn't. My axios service contains get, put, post and delete methods such as:
	/**
	 * GET
	 * @param url
	 * @param config
	 */
	get = async <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {
		const resp = await axios.get(url, config);
		return resp.data as T;
	};
that worked for me:
"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

It does even not work for me.

paullaster · 2023-02-21T04:14:10Z

Not working for me either

HI @imransilvake did u not faced error like "options must be an object error" with latest version of axios?

AXIOS VERSION used

"axios": "^1.3.2", "test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",

axiosservice.js file looks like below

import axios from 'axios'; import { qs, parse, stringify } from 'qs'; const buildInfoFilePath = '/system/buildInfo.json';

class AxiosService { instance = axios.create({ paramsSerializer: { encode: parse, serialize: stringify } });

none of the solution worked for me .

can u please guide me what exactly fixed your issue, and how your axios service.js file looks like

Advance thanks

Not working me too

rlemasquerier · 2023-03-06T10:22:23Z

For those of you who tried transformIgnorePatterns with no success, make sure that your babel config is a js file (babel.config.js) instead of .babelrc.

Made the difference in my project, not sure why...

SalahAdDin · 2023-03-06T10:46:24Z

For those of you who tried transformIgnorePatterns with no success, make sure that your babel config is a js file (babel.config.js) instead of .babelrc.

Made the difference in my project, not sure why...

We are working with vite.

Veryinheart · 2023-03-19T14:01:05Z

same issue with "jest": "^29.5.0", "axios": "^1.3.4" and None of these solutions works for me.

joberthrogers18 · 2023-03-24T13:11:12Z

Try upgrading jest to latest (>29.2.x), it worked for me without having to change jest config.

Update the lib like @pzi said works to me!

philly-vanilly · 2023-05-18T19:31:48Z

Could you not think of releasing two different libs, one for backend, one for frontend, with different build target or something? How many human life hours have been wasted on this nonsense?

SalahAdDin · 2023-05-19T09:53:02Z

Could you not think of releasing two different libs, one for the backend, and one for the front end, with different build targets or something? How many human life hours have been wasted on this nonsense?

isn't this library isomorphic?

sane4ek1994 · 2023-05-22T03:22:33Z

"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/""
Thanks for the solution, saved a lot of time 🙂

akphi mentioned this issue Oct 11, 2022

fix problem with named export axios #5104

Closed

Guiqft mentioned this issue Oct 15, 2022

Updating Axios from 0.27.2 to 1.0.0 breaks Jest tests in a create-react-app app #5026

Open

ccallendar mentioned this issue Oct 18, 2022

jest test error after update from 1.0.0-alpha.1 to 1.1.3 #5140

Closed

DigitalBrainJS mentioned this issue Oct 20, 2022

Refactored module exports; #5162

Merged

kiminpyo mentioned this issue Oct 28, 2022

jest를 이용한 TDD kiminpyo/wanted-pre-onboarding-fe-7#3

Open

gsreynolds added a commit to giranm/pd-live-react that referenced this issue Nov 2, 2022

Jest tests failed after upgrading axios to v1.1.2. Add axios to modul…

0bc7812

…eNameMapper to workaround axios/axios#5101 Signed-off-by: Gavin Reynolds <greynolds@pagerduty.com>

Marvan-T mentioned this issue Nov 4, 2022

Feature/best sellers homepage laurenmaylittle-cs/book-recommendations#17

Merged

andresmoschini mentioned this issue Nov 8, 2022

fix(deps): update dependency axios to v1 FromDoppler/hello-webapp#5

Merged

1 task

jasonsaayman closed this as completed Nov 10, 2022

OVO-Josh mentioned this issue Nov 11, 2022

1.2.0-alpha.1 #5249

Closed

kurund mentioned this issue Nov 12, 2022

More updates glific/glific-frontend#2189

Merged

jmcdo29 added a commit to Tony133/testing-nestjs that referenced this issue Nov 14, 2022

test: add fix for axios import

13fca56

ref: axios/axios#5101 (comment)

jmcdo29 mentioned this issue Nov 14, 2022

chore(deps): upgrade nx v15 jmcdo29/testing-nestjs#1841

Merged

jujaga mentioned this issue Dec 12, 2022

NPM package updates bcgov/common-hosted-email-service-showcase#28

Merged

4 tasks

mantariksh mentioned this issue Dec 14, 2022

feat: upgrade axios to 1.2.1 opengovsg/FormSG#5568

Merged

11 tasks

oxfist mentioned this issue Jan 4, 2023

Fix axios import error on tests patrickedqvist/wait-for-vercel-preview#48

Merged

rolandgeider added a commit to wger-project/react that referenced this issue Jan 30, 2023

Add fix to run axios on CI

2d7875a

See axios/axios#5101

holly-cummins mentioned this issue Feb 3, 2023

Jest parsing fails with the simple implementation of axios facebook/create-react-app#12987

Open

joseph-ortiz pushed a commit to joseph-ortiz/bookstoreclient that referenced this issue Mar 21, 2023

update test:nowatch for axios support axios/axios#5101

8baa547

angepol mentioned this issue Mar 29, 2023

Adds Axios library insightorchards/cha-ching#77

Merged

2 tasks

corinja mentioned this issue Apr 20, 2023

test: Make HTTP requests instead of calling endpoints in-process comicrelief/serverless-starter-app#59

Merged

Jest tests failed after upgrading axios to v1.1.2 #5101

Jest tests failed after upgrading axios to v1.1.2 #5101

Comments

imransilvake commented Oct 11, 2022 • edited

Describe the bug

To Reproduce

Environment

Temporary Fix

lejahmie commented Oct 11, 2022

pzi commented Oct 12, 2022 • edited

rathpc commented Oct 12, 2022

hisuwh commented Oct 12, 2022

rathpc commented Oct 12, 2022

rd-stefan-riehmer commented Oct 14, 2022

zntemel commented Oct 22, 2022

tanthuann commented Oct 24, 2022

pzi commented Oct 26, 2022

single9 commented Oct 28, 2022

nskazki commented Oct 29, 2022

kurund commented Nov 4, 2022

dhruvsakariya commented Nov 6, 2022

Describe the bug

To Reproduce

Environment

Temporary Fix

MatVD commented Nov 8, 2022

dhruvsakariya commented Nov 8, 2022 via email

AyoubXwire commented Nov 8, 2022 • edited

jasonsaayman commented Nov 10, 2022

OVO-Josh commented Dec 12, 2022

ventralnet commented Dec 20, 2022 • edited

ventralnet commented Dec 20, 2022

77pintu commented Dec 29, 2022 • edited

LiviuSosu commented Jan 1, 2023

SalahAdDin commented Jan 26, 2023

imransilvake commented Feb 6, 2023 • edited

arpitha-jaanaki commented Feb 10, 2023

imransilvake commented Feb 12, 2023 • edited

SalahAdDin commented Feb 12, 2023

paullaster commented Feb 21, 2023

rlemasquerier commented Mar 6, 2023

SalahAdDin commented Mar 6, 2023

Veryinheart commented Mar 19, 2023

joberthrogers18 commented Mar 24, 2023

philly-vanilly commented May 18, 2023

SalahAdDin commented May 19, 2023

sane4ek1994 commented May 22, 2023

imransilvake commented Oct 11, 2022 •

edited

pzi commented Oct 12, 2022 •

edited

AyoubXwire commented Nov 8, 2022 •

edited

ventralnet commented Dec 20, 2022 •

edited

77pintu commented Dec 29, 2022 •

edited

imransilvake commented Feb 6, 2023 •

edited

imransilvake commented Feb 12, 2023 •

edited