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

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

几天前，我开始了解

jest

，并试图掌握它。关于使用

jest

测试react组件，上提到了一个很好的教程。但是，当我尝试从

starter

目录测试一个组件时，我遇到了这个问题

SyntaxError:意外的令牌导入

在ScriptTransformer.\u transformAndBuildScript（../../../../../../../usr/local/lib/node\u modules/jest/node\u modules/jest runtime/build/ScriptTransformer.js:289:17） 两点钟（events.js:106:13）

根据本文的建议，我已经安装了

babel preset react

，并将其添加到我的

webpack.config.js

文件中

这是我的档案，我的档案，档案

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

从我的

.babelrc

和

网页

文件中的更改可以明显看出这一点

但我无法解决我遇到的问题。如果我在这里遗漏了什么，请告诉我，因为我花了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);
      });
   });

从“React”导入React；
从“react dom”导入react dom；
从“时钟”导入时钟；
描述（'时钟'，（）=>{
它（“渲染而不崩溃”，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
});
});

我试图继续学习该教程，但安装过程中出现错误。在我看来，教程很旧，Webpack1不推荐使用，其他软件包也经历了更改。你可以试试我的方法，但可能不适合你

• 在starter/CountdownTimer文件夹中运行

  npm安装

  。如果它抛出 此错误：“无法读取未定义的属性“find”，然后运行

  npm cache verify

  和

  npm install

• 然后运行

  npm安装–保存开发jest@18.0.0

  安装jest
• 在app文件夹中创建app.test.jsx
  和Clock.test.jsx
• 将“jest”添加到package.json测试脚本中
• 换一下你的

以下是文件的外观：

// 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"]]
}

//app.test.jsx
描述（'App'，（）=>{
它（'应该能够运行测试'，（）=>{
期望（1+2）、toEqual（3）；
});
});
//Clock.test.jsx
从“React”导入React；
从“react dom”导入react dom；
//注意路径。
从“../components/Clock”导入时钟；
描述（'时钟'，（）=>{
它（“渲染而不崩溃”，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
});
});
//package.json
{
“名称”：“倒计时”，
“版本”：“0.0.1”，
“说明”：“，
“main”：“server.js”，
“脚本”：{
“开始”：“node server.js”，
“测试”：“开玩笑”
},
“作者”：“乔伊斯·埃切萨”，
“许可证”：“麻省理工学院”，
“依赖项”：{
“express”：“^4.14.0”，
“反应”：“^15.4.0”，
“反应dom”：“^15.4.0”
},
“依赖性”：{
“巴别塔核心”：“^6.18.2”，
“巴别塔加载器”：“^6.2.8”，
“babel-preset-es2015”：“^6.18.0”，
“巴别塔预设反应”：“^6.16.0”，
“css加载器”：“^0.26.0”，
“基础场地”：“^6.2.4”，
“玩笑”：“^18.0.0”，
“jquery”：“^3.1.1”，
“节点sass”：“^3.13.0”，
“sass加载程序”：“^4.0.2”，
“脚本加载程序”：“^0.7.0”，
“样式加载器”：“^0.13.1”，
“网页包”：“^1.13.3”
}
}
//B.法律改革委员会
{
“预设”：[[“es2015”]，[“反应”]]
}

---

运行

npm测试

。这对我使测试通过起到了作用，希望它也能帮助你。

你能链接到测试文件吗，我怀疑你没有导入违反规范的模块顶层。你可以通过在babel中将loose属性设置为true来改变这一点。@aaronf更新了有问题的测试文件。你的配置非常混乱。1.修复您的package.json依赖项。。。去掉那些预设的东西，package.json不是加载程序的配置！用Babel版本替换它（你甚至不需要npm软件包）。2.摆脱你的网页配置中的查询！我应该做些什么改变。如果你能在回答中加上这些，那就太好了。谢谢：）此错误基本上表明导入未被传输。如果预设中没有“es2015”，则可能发生这种情况。请参阅我编辑的答案。