为什么 Jest 在测试 React 组件时抛出 "Unexpected token ILLEGAL"？

Question

我按照 Jest - React tutorial 测试了一个 React 组件。

不幸的是，Jest 抛出：

SyntaxError: /Users/mishamoroshko/react-playground/src/search-panel/questions/__tests__/questions-test.js: /Users/mishamoroshko/react-playground/src/search-panel/questions/questions.js: Unexpected token ILLEGAL
at Contextify.sandbox.run (/Users/mishamoroshko/react-playground/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify/lib/contextify.js:12:24)
at JSDomEnvironment.runSourceText (/Users/mishamoroshko/react-playground/node_modules/jest-cli/src/JSDomEnvironment.js:108:22)
at Object.runContentWithLocalBindings (/Users/mishamoroshko/react-playground/node_modules/jest-cli/src/lib/utils.js:341:23)

重现：

git clone git@github.com:SEEK-Jobs/react-playground.git
cd react-playground
npm install
npm test

有什么想法吗？

更新 1：

请问是不是Jest不了解ES6，需要用6to5-jest.

有没有办法在 package.json 中指定 2 个预处理器？

"jest": {
  "rootDir": "src",
  "scriptPreprocessor": "../preprocessor.js",
  "unmockedModulePathPatterns": [
    "../node_modules/react"
  ]
}

Answer 1

确实，添加 6to5-jest 解决了问题。

以下是我在 Jest 中实现多个 scriptPreprocessor 的方法：

// preprocessor.js

var ReactTools = require('react-tools');
var to5 = require('6to5-jest').process;

module.exports = {
  process: function(src, filename) {
    return ReactTools.transform(to5(src, filename));
  }
};

如果你有更好的实现方式，欢迎留言。

为什么 Jest 在测试 React 组件时抛出 "Unexpected token ILLEGAL"？

Why Jest is throwing "Unexpected token ILLEGAL" when testing React component?

reactjs

jestjs

reactjs-testutils