我知道已经问过无数次了,但是尽管遵循了所有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


从我的.babelrcwebpack文件中的更改可能显而易见

但是我无法解决我遇到的问题。如果我在这里遗漏了一些东西,请告诉我,因为我花了3-4个小时的时间在SO和其他论坛中搜索任何答案,但我似乎找不到。

javascript - 运行玩笑测试时出现意外的 token 导入错误-LMLPHP

更新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 verifynpm 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。这对我来说很有效,可以使测试通过,希望对您有所帮助。

09-30 13:31
查看更多