时间戳

首页 > 解决方案 > Babel-jest 不会在 node_modules 中转译 JSX

reactjs - Babel-jest 不会在 node_modules 中转译 JSX

问题描述

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

由于https://github.com/facebook/jest/issues/6229尝试添加transformIgnorePatterns并重命名为babel.config.js

包.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',
};

标签： reactjsjestjsbabeljsreact-testing-library

解决方案

实际上，下面的链接对我有所帮助。添加transformIgnorePatterns我的组件node_modules就足够了，因此请忽略jestjs 文档https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customizationbabel-jest中的所有文件而不是我的组件图像

推荐阅读