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

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
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';
      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)/\"",
"test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
          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.
          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'),
  pzi, marques-work, imransilvake, tomasklingen, junkor-1011, Baldrani, Guiqft, akozlov75, maxim-bliznetsov, shanelau, and 106 more reacted with thumbs up emoji
  Baldrani, matheusslg, wallynm, marceviana, Wooulf, hshine1226, Sergio-Pedretti, CharlesICON, botermbr, anddersonrds, and 31 more reacted with hooray emoji
  matheusslg, wallynm, Wooulf, hshine1226, Sergio-Pedretti, anddersonrds, 0x20F, kallehult, uzZ, jestanoff, and 35 more reacted with heart emoji
  Baldrani, matheusslg, wallynm, Wooulf, hshine1226, juanpicado, mtakeda, Sergio-Pedretti, CharlesICON, anddersonrds, and 27 more reacted with rocket emoji
    All reactions
          @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')
  pasha1248, StefanoConsonni, izakVoigt, 77pintu, qqKostya, Gust4voSales, fre-ben, Hermann-237, Raul220, sane4ek1994, and 11 more reacted with thumbs up emoji
  jinal1788 reacted with thumbs down emoji
  imransilvake, kkrull, slimbde, kiminpyo, dantersack, drasolon, Klevens, fyodore82, andrewthenew, FarNys, and 14 more reacted with hooray emoji
    All reactions
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
  Ibaigilbiko, tarcon, andreiPereira, jamiehaywood, timo-klarshift, brunosana, bor01, design1online, and IustinPisticiuc reacted with thumbs up emoji
  serkon and Havardmj reacted with thumbs down emoji
    All reactions
  missjennbo, single9, EverStarck, StefanoConsonni, Azfletch, thifelipesilva, giovanni-bertoncelli, clsechi, jamesryan-dev, eleazar1595, and 5 more reacted with thumbs up emoji
  giovanni-bertoncelli and MattV-NL reacted with laugh emoji
  giovanni-bertoncelli, NiharR27, Stalinko, MattV-NL, and vignesh-krossark reacted with heart emoji
  single9, charithf, EverStarck, Azfletch, jmoyson, nhotalling-viagio, giovanni-bertoncelli, AndriScherbakov, jamesryan-dev, animir, and MattV-NL reacted with rocket emoji
    All reactions
Try upgrading jest to latest (>29.2.x), it worked for me without having to change jest config.
You save my time!
  christian98, kurund, kurpav, voronindenis, aleksandricbm, SashaZel, suhasrao24, Tskxe33, YuHyun-P, tanbt, and 21 more reacted with thumbs up emoji
  DeepakSharma04 reacted with laugh emoji
  BorisDmv, jvclbr, klaevv, and brt-henry reacted with heart emoji
  rcbevans, kurpav, miroberes, Stevensierraq, tanbt, DeepakSharma04, naziio, and erykmoskala reacted with rocket emoji
    All reactions
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';
      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)/\"",
"test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
Thank You it worked
Any permanent solution Found ??
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:
 ***@***.***>
          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",
  kmiwa007, np01c, tottran, fangshiman, jensborje, souvikjanatw, jpgoelz, suhasrao24, I-ad, anyulled, and 11 more reacted with thumbs up emoji
  miroberes, zhenya-yurchik-pw-int, lissettdm, and mfs-juan-gutierrez reacted with heart emoji
  np01c reacted with rocket emoji
    All reactions
          Hi 👋
Please try the latest pre-release by running the following:
npm i [email protected]
Please provide feedback in either the pinned issue or the discussion thread 🧵
  erosselli, pvirreira, erikasoncin, souvikjanatw, eiskalteschatten, shreyasvaidya9, and WTFox reacted with thumbs down emoji
  grantholle reacted with hooray emoji
  cduff, heinburger, and erosselli reacted with eyes emoji
    All reactions
"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\""
this worked, when I restart test command
this worked for me. thank you!
          This link export the path ./dist/node/axios.cjs in node_modules/axios/package.json, which is:
"exports": {

"./dist/node/axios.cjs": "./dist/node/axios.cjs"

https://github.com/axios/axios/issues/5358#issuecomment-1447646435
This link export the path ./dist/node/axios.cjs in node_modules/axios/package.json, which is:
"exports": {

"./dist/node/axios.cjs": "./dist/node/axios.cjs"

https://github.com/axios/axios/issues/5358#issuecomment-1447646435
It is not working at all.
Axios : "axios": "^1.5.1", Jest : "27.5.1", Tried out all the solutions but none working for these versions..
That's why we moved to Vitest.
      Upgrade all dependencies. Enable transformation for axios in order to
make tests execute correctly. See
axios/axios#5101.
      Upgrade all dependencies. Enable transformation for axios in order to
make tests execute correctly. See
axios/axios#5101.
--transformIgnorePatterns "node_modules/(?!axios)/""
nothing suggested here or on the readme works for me as well..
here are my versions:
"jest": "^29.7.0",
"nock": "^13.4.0",
"axios": "^1.6.2",
probably worth mentioning i'm using ts-node.. maybe has something to do with it?
So I got to solve with this:
"jest": {
    "transformIgnorePatterns": ["node_modules/(?!axios)/"]
That's why we moved to Vitest.
but have one question jest can't work with Vite? Even knowing Vitest is integrated with jest, So still vitest should used?

btw, I'm also using Vite
In my case, I was also facing the same problem So I got to solve with this:
"jest": {
    "transformIgnorePatterns": ["node_modules/(?!axios)/"]
That's why we moved to Vitest.
but have one question jest can't work with Vite? Even knowing Vitest is integrated with jest, So still vitest should used? btw, I'm also using Vite
Forget Jest, embrace Vitest.
          If you are using xhrAdapter then you have to use the module mapper configuration for the not found modules in your package.json file:
"jest": { "moduleNameMapper": { "axios/unsafe/adapters/xhr": "axios/lib/adapters/xhr.js", "axios/unsafe/core/settle": "axios/lib/core/settle.js" } }
          To help anyone else in the future facing similar issues in other packages, I think the issue is that Jest 27 and below does not fully support package.json exports (see Jest 28 blog post)
As for why this issue happens with Axios and not many other packages, axios is declaring "type": "module" in the package.json with "main": "index.js", such that index.js is an ESM file. If you are running jest tests in a non-node environment (e.g. jsdom), this will cause issues in Jest 27 and below since dist/node/axios.cjs is only referenced in the exports field.
Solutions for Library Authors
Make the main field in package.json references a CommonJS file and use the module field for the ESM file.
Don't support Jest v27 and below out-of-the-box. (ideally also provide some docs regarding setup)
NOTE: If you are using the exports field to remap how consumers import specific entry points (e.g. my-package/hello-world -> my-package/dist/hello-world.cjs), not supporting Jest 27 and below may be the only option.
Solutions for Application Authors
Upgrade Jest to v28+ for package.json exports compatibility
Use the moduleNameMapper config option to force the CJS file to be used. (See above examples for how this is done for axios specifically).
NOTE: Other recommendations above may also work, but this is the only one that I know of myself that works.