React Jest 引用antd DatePicker 测试报错

Question

使用react-create-app 创建的react 项目，
使用antd 的DatePicker 组件进行jest 单元测试编写时， 报错

 Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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/en/configuration.html

    Details:

    C:\Users\cc\Desktop\workspace\x**x\node_modules\antd\es\date-picker\locale\zh_CN.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _extends from "@babel/runtime/helpers/esm/extends";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { DatePicker } from 'antd';
      2 | import 'moment/locale/zh-cn';
    > 3 | import zhCN from 'antd/es/date-picker/locale/zh_CN'; //这里引入报错

主要是多语言文件引入@babel/runtime;

import _extends from "@babel/runtime/helpers/esm/extends";  // 这里报错！！！！
import CalendarLocale from "rc-picker/es/locale/zh_CN";
import TimePickerLocale from '../../time-picker/locale/zh_CN'; // 统一合并为完整的 Locale

var locale = {
  lang: _extends({
    placeholder: '请选择日期',
    yearPlaceholder: '请选择年份',
    quarterPlaceholder: '请选择季度',
    monthPlaceholder: '请选择月份',
    weekPlaceholder: '请选择周',
    rangePlaceholder: ['开始日期', '结束日期'],
    rangeYearPlaceholder: ['开始年份', '结束年份'],
    rangeMonthPlaceholder: ['开始月份', '结束月份'],
    rangeWeekPlaceholder: ['开始周', '结束周']
  }, CalendarLocale),
  timePickerLocale: _extends({}, TimePickerLocale)
}; // should add whitespace between char in Button

locale.lang.ok = '确 定'; // All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json

export default locale;

.babelrc.js 文件

module.exports = {
  presets: [
    [
      '@babel/preset-env'
    ]
  ],
  plugins: [
    "@babel/plugin-transform-runtime"
  ]
};

jest.config.js 文件；

module.exports = {
  transform: {
    '^.+\\.ts?$': 'babel-jest',
  },
}

package.json 文件

"devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/runtime": "7.12.5",
    "@types/react-router-dom": "^5.1.7",
    "babel-jest": "^26.6.3",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "less": "^4.1.1",
    "less-loader": "5.0.0",
    "react-app-rewired": "^2.1.8",
    "ts-babel": "^6.1.7",
    "ts-jest": "^27.0.4"
  }

请教各位大佬， 该怎么修改呢？

Answer 1

具体不好说，但是问题是出在文件的transform上

transform: {
    '^.+\\.(js|jsx|ts|tsx)
我这是这样transform的
还需要看一下你报错的那个import文件具体是什么，看着像是esm规范的解析失败，但是又是node_modules包里的。
具体可以尝试一下报错的文字上说的
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
看官网如何是用esm规范，或者加到jest的config文件transformIgnorePatterns里
: '<rootDir>/node_modules/babel-jest',
    '^.+\\.(css|less)
我这是这样transform的
还需要看一下你报错的那个import文件具体是什么，看着像是esm规范的解析失败，但是又是node_modules包里的。
具体可以尝试一下报错的文字上说的

看官网如何是用esm规范，或者加到jest的config文件transformIgnorePatterns里
: '<rootDir>/config/jest/cssTransform.js',
  },

我这是这样transform的
还需要看一下你报错的那个import文件具体是什么，看着像是esm规范的解析失败，但是又是node_modules包里的。
具体可以尝试一下报错的文字上说的

看官网如何是用esm规范，或者加到jest的config文件transformIgnorePatterns里