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

Question

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

几天前我开始了解jest并试图抓住它。关于使用jest测试反应组件，DZone提到了一个很好的教程。但是，当我尝试测试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);
      });
   });

Answer 1

我试图跟进该教程，但甚至无法安装它而没有错误。在我看来，教程是旧的，webpack 1已被弃用，其他包也经历了变化。您可以尝试我的步骤，但它可能不适合您。

• 在starter / CountdownTimer文件夹中运行Color|Change Blue | 3225 eg (4225-1000) Red | 1525 Yellow| 1570 Red | 2060 Blue | 2720 。如果它抛出 这个错误：“无法读取未定义的属性'find'，然后运行npm install和npm cache verify。
• 然后运行npm install以安装jest。
• 在app文件夹中创建npm install –save-dev jest@18.0.0文件夹，创建app.test.jsx
  和Clock.test.jsx。
• 将__tests__添加到package.json测试脚本。
• 更改.babelrc。

以下是文件的外观：

“jest”

运行// 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"]] } 。这对我来说有助于测试通过，希望它也会帮助你。