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

Posted

技术标签:

【中文标题】运行笑话测试时出现意外的令牌导入错误【英文标题】: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

这从我的.babelrcwebpack 文件的变化中可能很明显

但我无法解决我遇到的问题。如果我在这里遗漏了什么,请告诉我,因为我花了 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 verifynpm 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”,则可能会发生这种情况。请参阅我编辑的答案。

以上是关于运行笑话测试时出现意外的令牌导入错误的主要内容,如果未能解决你的问题,请参考以下文章

无法解析错误:伊斯坦布尔“导入”时出现意外令牌

使用 Jest 测试 Angular 时出现“意外的令牌导入”

在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误

Vue-loader 语法错误:从 js 文件导入组件时出现意外的令牌

使用导入类型时出现意外令牌

笑话:意外的令牌@Decorator