Jest 测试用例在动态 import() 错误中给出了 Unexpected token

Question

我使用create-react-app 和react-scripts-ts 生成了一个react 应用程序，并弹出以配置webpack。我正在使用react-async-component 异步渲染页面。

import { asyncComponent } from 'react-async-component';

const AsyncNotFoundPage = asyncComponent({
    resolve: () => import('./NotFoundPage').then(x => x.default)
});

export { AsyncNotFoundPage };

当我启动应用程序时，它会按预期工作。它拆分未找到页面的块。但是，以下开玩笑的测试用例给出了错误；

describe('AsyncNotFoundPage Component', () => {

    it('should render async', () => {
        const wrapper = shallow(<AsyncNotFoundPage />);
        expect(wrapper.find(NotFoundPage)).toBeTruthy();
    });
});

它给出了以下错误；

Unexpected token import

我尝试将所有动态导入插件添加到 package.json 中的 babel 配置中。它不起作用。

有什么想法吗？

Answer 1

安装 babel-jest

npm install --save-dev babel-jest

为环境配置 .babelrc Jest 会将您的NODE_ENV 更改为“test”，而 Babel 没有针对此环境的任何配置，我们通常为开发和生产环境定义 Babel 配置。当没有 babel 转译时，import 关键字实际上变得未定义，因为它实际上不存在于 JS 上下文中。

更新您的.babelrc 以匹配关注

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
        ],
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
        "dynamic-import-webpack"
      ]
    }
  }
}

如果您正在使用其他一些插件，请将它们也添加到测试环境中

将 jest.congfig.json 添加到项目根目录

{
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

或 使用 jest 配置更新您的 package.Json

"jest": {
"transform": {
        "^.+\\.jsx?$": "babel-jest"
      }
}

如果您使用的是jest.config.json

"scripts": {
    "test": "jest --config=jest.config.json --watch"
},

否则

"scripts": {
        "test": "jest --watch"
    },