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

Question

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

我是几天前才知道 jest 的，并试图亲自动手。 DZone 上提到了一个关于使用 jest 测试 React 组件的很好的教程。但是，当我尝试测试 starter 目录中的一个组件时，我遇到了这个问题，

SyntaxError: Unexpected token import

at ScriptTransformer._transformAndBuildScript (../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289:17) at emitTwo (events.js:106:13)

按照此中的建议，我已经安装了 babel-preset-react 并将其添加到我的 webpack.config.js 文件中。

这是我的 webpack.config.js file, my package.json file , the .babelrc 文件

请注意，我已经完成了这些 SO 帖子中发布的解决方案 -

从我的 .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。这对我通过测试很有用，希望对你也有帮助。

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

Unexpected token import error in while running jest tests

javascript

reactjs

jestjs

babel-jest