运行玩笑测试时出现意外的令牌导入错误 [英] Unexpected token import error in while running jest tests

问题描述

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

I know this has been asked countless times, but I am not able to fix the problem inspite of following all the SO solutions and suggestions.

几天前，我认识了jest，并尝试着动手.在 DZone 中提到了有关使用jest测试反应组件.但是，当我尝试测试starter目录中的一个组件时，我遇到了这个问题，

I came to know about jest a few days ago and tried to have my hands on it. There is a good tutorial mentioned on DZone about using jest to test react components. However, when I try testing one of the components from the starter directory, I am having this issue,

SyntaxError:意外的令牌导入

SyntaxError: Unexpected token import

在ScriptTransformer._transformAndBuildScript(../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289中: 17) 发生在takeTwo(events.js:106:13)

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

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

As per suggested in this SO post, I have already installed babel-preset-react and added it to my webpack.config.js file.

这是我的 webpack.config.js 文件，我的 .babelrc 文件

Here is my webpack.config.js file, my package.json file , the .babelrc file

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

Please note that I have already gone through the solutions posted in these SO posts -

• 链接1
• 链接2
• 链接3

• Link 1
• Link 2
• Link 3

这可能从我的.babelrc和webpack文件

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

But I'm not able to fix the issue that I'm having. Please let me know if I am missing something here, since I have spent a good 3-4 hrs searching SO and other forums for any answer and I can't seem to find it.

更新1:这是我的测试文件-Clock.test.jsx

Update 1: Here is my test file - 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，其他软件包也进行了更改.您可以尝试我的步骤，但可能对您不起作用.

I was trying to follow up that tutorial but could not even install it without errors. As I see it, the tutorial is old, webpack 1 is deprecated, and other packages also undergone changes. You could try my steps, but it may not work for you.

• 在starter/CountdownTimer文件夹中，运行npm install.如果抛出 错误:无法读取未定义的属性'find'"，然后运行npm cache verify和npm install.
• 然后运行npm install –save-dev jest@18.0.0安装笑话.
• 在app文件夹中创建__tests__文件夹，在其中创建app.test.jsx
  和Clock.test.jsx.
• 将jest添加到package.json测试脚本中.
• 更改您的.babelrc.

• In the starter/CountdownTimer folder run npm install. If it throws this errors: "Cannot read property 'find' of undefined", then run npm cache verify and npm install.
• Then run npm install –save-dev jest@18.0.0 to install jest.
• In the app folder create __tests__ folder in there create app.test.jsx
  and Clock.test.jsx.
• Add "jest" to the package.json test script.
• Change your .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.这对我来说很有效，可以通过测试，希望对您也有帮助.

Run npm test. This worked for me to get tests passing, hope it will help you too.

这篇关于运行玩笑测试时出现意外的令牌导入错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！