reactjs - React Jest 导致 "SyntaxError: Unexpected token ."

Question

我现在正在使用 React Jest 来测试代码。如果组件是单个组件，并且不导入任何其他内容，则“npm test”运行顺利。现在我想一起测试多个组件，我立即收到此错误:

SyntaxError: Unexpected token .

每当 React 导入其他东西时，比如这个:

require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );

然后使用 Jest，它抛出意外的标记“。”错误。

我的设置一定有问题，但是哪里有问题呢？我的 package.json 文件包含:

 "jest": {
   "unmockedModulePathPatterns": [
     "<rootDir>/node_modules/react/",
     "<rootDir>/node_modules/react-dom/",
     "<rootDir>/node_modules/react-addons-test-utils/"
   ]
 }

并且 .babelrc 文件已经在根目录中。还包括 babel-jest。

Answer 1

查看 Webpack integration 的 Jest 文档。问题是 Jest 不能与 JavaScript 以外的其他东西一起工作。因此，您必须模拟导入的所有非 JavaScript 文件。最简单的方法是在 Jest 配置中配置 moduleNameMapper。

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

使用__mocks__/styleMock.js，看起来像这样。

module.exports = {};