How to transform module after ordinary transform has run in jest

问题:

Testing React components with jest. Some of these components make use of OpenLayers (ol package v5.2.0). In ol package v4 I applied transformIgnorePatterns to have the ol package transformed:

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

Now I get the following error when running NODE_ENV=test jest:

(...) (...)/node_modules/ol/index.js:5 export {default as AssertionError} from './AssertionError.js'; ^^^^^^  SyntaxError: Unexpected token export    14 |     let map = new Map({   15 |       layers: options.layers, > 16 |       target: 'map',      |           ^   17 |       view: options.view,   18 |       controls: options.controls   19 |     }); 

I have applied the following presets and plugins in .babelrc:

"presets": [    ["@babel/preset-env", {      "modules": false     }    ],    "@babel/preset-react" ], "plugins": [     "lodash",     ["@babel/plugin-transform-runtime", {       "corejs": 2,       "helpers": true,       "regenerator": true,       "useESModules": false     }   ],   "@babel/plugin-transform-modules-commonjs",   "@babel/transform-arrow-functions",   "@babel/plugin-syntax-dynamic-import",   "@babel/plugin-syntax-import-meta",   ["@babel/plugin-proposal-class-properties", {"loose": false}],   "@babel/plugin-proposal-json-strings"], "env": {     "production": {},     "development": {},     "test": {       "presets": [         ["@babel/preset-env"],         "@babel/preset-react"       ]     }   } 

A similar problem is solved when building the application by applying the global-transform option (https://github.com/browserify/browserify#usage) cf. this issue thread: https://github.com/openlayers/openlayers/issues/8497.

$ browserify -g [ babelify --presets [ \"@babel/preset-env\" ] --ignore [ \"//node_modules/(?!ol/)/\" ] ] ./src/index.js -o ./public/js/bundle.js 

I want to apply a similar transformation to the ol module but unsure on how to approach it. The transformIgnorePatterns used to solve this problem cf. https://github.com/facebook/jest/issues/2550

回答1:

The error no longer occurs if I put the contents of .babelrc into babel.config.js in the root of the project.

module.exports = {     (...) }; 

cf.

• https://github.com/facebook/jest/issues/6229
• https://github.com/facebook/jest/issues/6053#issuecomment-383632515

side effect - TypeError: $export is not a function when loading the bundle built via browserify/babelify, but I guess it is a configuration problem.

Edit: Side effect was solved for me by changing the options for the plugin "@babel/plugin-transform-runtime" to:

{   "corejs": false,   "helpers": false,   "regenerator": true,   "useESModules": false } 

cf. https://stackoverflow.com/a/39502362/3798151 and installing @babel/runtime cf. https://babeljs.io/docs/en/babel-plugin-transform-runtime

文章来源: How to transform module after ordinary transform has run in jest