使用 React 进行 JEST 测试答案

【问题标题】：JEST testing with React使用 React 进行 JEST 测试
【发布时间】：2017-08-28 18:06:33
【问题描述】：

我使用 create-react-app 样板构建了一个小型 React 应用程序。我正在尝试使用 JEST（版本 20.0.4）来实现一些单元测试但我在运行测试时遇到了问题。我的 babel 版本是 6.26.0。

这是我的测试脚本：

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../App';

it('renders without crashing', () => {
 const div = document.createElement('div');
 ReactDOM.render(<App />, div);
});

这是我的 Package.json：

"jest": {
"moduleNameMapper": {
  "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"transform": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
}}

这是我在运行测试时收到的错误消息：

 FAIL  src/test/App.test.jsx
 ● Test suite failed to run

/Users/Bluna/lunathecat-projects/reddit-react-app/src/test/App.test.jsx:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at <anonymous>

这是我第一次使用 JEST，我不确定到底发生了什么。我做错了什么？？

【问题讨论】：

标签： reactjs jestjs babeljs

【解决方案1】：

你需要使用 jest-babel 转换你的文件。

【讨论】：