开玩笑：测试套件无法运行，语法错误：意外的令牌导入

IT技术 reactjs babeljs jestjs
2021-04-12 07:08:26

这是我在 package.json 文件中的开玩笑配置：

"jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }

以及位于我的根文件夹中的 .babelrc 文件：

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

根据在 jest入门页面上找到的文档，这是 babel 工作所需的一切，它很神奇。

不管怎样，这个测试：

import React from 'react';
import {shallow} from 'enzyme';
import Landing from '../components/Landing.component';

describe('<Landing/>', () => {
  it('should render a header to the page', () => {
    const landing = shallow(<Landing/>);
    expect(landing.find('h1').text()).toBe('This is the Landing component');
  });
});

返回：

FAIL  app/tests/Landing.component.test.js   
 ● Test suite failed to run

   /Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
   ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                            ^^^^^^
   SyntaxError: Unexpected token import

     at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

我究竟做错了什么？

6个回答

Jest 将 env 变量设置为 test，所以我必须将我的预设添加到 .babelrc 中的 env 设置中：

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"]
    }
  }
}
注意：简单的反应项目不需要插件部分。
2021-06-16 07:08:26

每个年度预设只编译当年批准的内容。babel-preset-env 替换es2015, es2016, es2017,latest

基于此，在最新的配置中，您必须使用/替换您的 Plugins/Presetes2015和任何esX新的：env.

  1. 您必须babel-preset-env使用npm install.
  2. 在你的.babelrc你应该相应地更新：
{
  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...
}

更多关于Babel 插件官方文档的信息。

☝️ 记住数组中插件/预设的顺序很重要。

就我而言，我有以下.babelrc配置：

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]
}

即使babel-env指定了我仍然收到错误。要修复它，我必须删除“module”：错误标志。

正如 Jest 文档中所说，您需要为 Jest 打开它。您只能在测试环境中打开它。检查 Jest“入门”（无法在此处粘贴代码）。
2021-05-31 07:08:26

Jest 不处理导入，所以它需要一个转换插件，这就是我必须添加插件的原因：

babel-plugin-dynamic-import-node

并更新我的 babel 设置以告诉 jest 使用此插件正确转换代码：

"env": {
    "test": {
      "plugins" : ["dynamic-import-node"]
    }
  }

GitHub 线程

你需要安装 babel-jest。我有同样的问题。

转到您的应用程序目录， yarn 添加 babel-jest

祝你好运！

其它你可能感兴趣的问题
上一篇Redux 展示组件与容器组件 下一篇为什么 react 中的组件需要大写？