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

来源：https://stackoverflow.com/questions/52300919/how-to-transform-module-after-ordinary-transform-has-run-in-jest

标签

reactjs

babeljs

OpenLayers

jestjs

babel-jest