我知道已经问过无数次了,但是尽管遵循了所有SO解决方案和建议,但我还是无法解决问题。
几天前,我认识了jest
,并尝试着尝试。 DZone上有一个很好的教程,涉及使用jest
测试React组件。但是,当我尝试测试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);
});
});
最佳答案
我试图跟进该教程,但是甚至没有错误也无法安装。正如我所看到的,该教程很旧,不推荐使用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
。这对我来说很有效,可以使测试通过,希望对您有所帮助。