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

IT技术 javascript reactjs jestjs babel-jest
2021-05-15 03:34:44

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

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

语法错误：意外的令牌导入

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

根据this SO post中的建议，我已经安装babel-preset-react并将其添加到我的webpack.config.js文件中。

这是我的webpack.config.js文件，我的package.json文件，.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);
      });
   });
1个回答

我试图跟进该教程，但甚至无法正确安装它。在我看来，教程是旧的，webpack 1 已弃用，其他包也发生了变化。你可以试试我的步骤，但它可能不适合你。

  • 在 starter/CountdownTimer 文件夹中运行npm install. 如果它抛出这个错误：“无法读取未定义的属性'find'”，然后运行npm cache verify和npm install。
  • 然后运行npm install –save-dev jest@18.0.0安装jest。
  • 在 app 文件夹中的 create__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。这对我让测试通过有用，希望它也能帮助你。

其它你可能感兴趣的问题
上一篇从 Webpack 中的 bundle 中排除特定的包 下一篇语义 UI 图像属性不适用于语义 UI react