运行笑话测试时出现意外的令牌导入错误

Posted 2023-02-22

【中文标题】运行笑话测试时出现意外的令牌导入错误

【英文标题】：Unexpected token import error in while running jest tests

【发布时间】：2017-11-12 14:08:25

【问题描述】：

我知道这已被问过无数次，但尽管遵循了所有 SO 解决方案和建议，但我无法解决问题。

几天前我知道了jest，并试图亲自动手。 DZone 上提到了一个很好的教程，关于使用 jest 测试反应组件。但是，当我尝试测试 starter 目录中的一个组件时，我遇到了这个问题，

SyntaxError: 意外的令牌导入

在 ScriptTransformer._transformAndBuildScript (../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289: 17) 在 emitTwo (events.js:106:13)

按照SO post 中的建议，我已经安装了babel-preset-react 并将其添加到我的webpack.config.js 文件中。

这是我的webpack.config.js 文件，我的package.json 文件，.babelrc 文件

请注意，我已经浏览了这些 SO 帖子中发布的解决方案 -

Link 1 Link 2 Link 3

这从我的.babelrc 和webpack 文件的变化中可能很明显

但我无法解决我遇到的问题。如果我在这里遗漏了什么，请告诉我，因为我花了 3-4 个小时在 SO 和其他论坛上搜索任何答案，但我似乎找不到它。

更新 1：这是我的测试文件 - Clock.test.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Clock from 'Clock';

 describe('Clock',()=>
      it("renders without crashing",()=>
         const div = document.createElement('div');
         ReactDOM.render(<Clock/>,div);
      );
   );

【问题讨论】：

你能链接到测试文件吗，我怀疑你没有在违反规范的模块的顶层导入。您可以通过在 babel 中将松散属性设置为 true 来更改它。

@AaronF 更新了有问题的测试文件。

您的配置非常混乱。 1. 修复你的 package.json 依赖...去掉那些预设的东西，package.json 不是你的加载器的配置！用 Babel 版本替换它（你甚至不需要那个 npm 包）。 2. 去掉 webpack 配置中的查询！

我应该做些什么改变。如果您可以在答案中添加这些内容，那就太好了。谢谢:)

【参考方案1】：

我试图跟进该教程，但我什至无法在没有错误的情况下安装它。如我所见，教程很旧，webpack 1 已弃用，其他包也发生了变化。您可以尝试我的步骤，但它可能不适合您。

在 starter/CountdownTimer 文件夹中运行 npm install。如果它抛出 此错误：“无法读取未定义的 'find' 属性”，然后运行 ​​npm cache verify 和 npm install。 然后运行npm install –save-dev jest@18.0.0 来安装jest。 在 app 文件夹中创建 __tests__ 文件夹，在那里创建 app.test.jsx 和 Clock.test.jsx。 将“jest” 添加到package.json 测试脚本中。 更改您的 .babelrc。

文件如下所示：

// app.test.jsx
describe('App', () => 
    it('should be able to run tests', () => 
        expect(1 + 2).toEqual(3);
    );
);

// Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
// Note the path.
import Clock from '../components/Clock';

describe('Clock',()=>
  it("renders without crashing",()=>
     const div = document.createElement('div');
     ReactDOM.render(<Clock/>,div);
  );
);

// package.json

  "name": "countdown-timer",
  "version": "0.0.1",
  "description": "",
  "main": "server.js",
  "scripts": 
    "start": "node server.js",
    "test": "jest"
  ,
  "author": "Joyce Echessa",
  "license": "MIT",
  "dependencies": 
    "express": "^4.14.0",
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  ,
  "devDependencies": 
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.0",
    "foundation-sites": "^6.2.4",
    "jest": "^18.0.0",
    "jquery": "^3.1.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  


// .babelrc

    "presets": [["es2015"], ["react"]]

运行npm test。这对我通过测试很有帮助，希望它也能帮助你。

【讨论】：

这个错误基本上说明导入没有被转译。如果您的预设中没有“es2015”，则可能会发生这种情况。请参阅我编辑的答案。