Babel-jest不能在node_modules中转换JSX

Question

运行测试时，Babel-jest不能转换node_modules文件夹中的JSX / ES6，不使用node_modules中其他组件的React组件可以正确通过所有测试。

尝试添加transformIgnorePatterns并重命名为babel.config.js，原因是https://github.com/facebook/jest/issues/6229

package.json

"devDependencies": {
    "@babel/core": "7.1.2",
    "@babel/node": "7.0.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.0",
    "@babel/preset-env": "7.2.0",
    "@babel/preset-react": "7.0.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "24.5.0",
    "babel-loader": "8.0.4",
    "jest": "24.5.0",
    "jest-dom": "3.1.3",
    .......
  },

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
    'react-hot-loader/babel',
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs', '@babel/plugin-proposal-class-properties'],
    },
  },
};

jest.config.js

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  moduleNameMapper: {
    '\\.(css|less|scss|sss)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jsdom',
};

Answer 1

实际上，下面的链接对我很有帮助。在transformIgnorePatterns中添加来自node_modules的组件就足够了，所以babel-jest会忽略所有文件，而不是我的组件

image from jestjs docs

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization