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

Question

我知道这已被问过无数次，但尽管遵循了所有 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);
      });
   });

Answer 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。这对我通过测试很有帮助，希望它也能帮助你。