运行笑话测试时出现意外的令牌导入错误
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这从我的.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”,则可能会发生这种情况。请参阅我编辑的答案。以上是关于运行笑话测试时出现意外的令牌导入错误的主要内容,如果未能解决你的问题,请参考以下文章
使用 Jest 测试 Angular 时出现“意外的令牌导入”
在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误