React JS Jest导致"SyntaxError:Unexpected token".

Question

我现在使用反应JEST来测试代码.如果一个组件是单个的,而不是导入任何其他组件,"npm test"运行顺利,现在,我想要一起测试多个组件,我立即得到了这个错误:

SyntaxError: Unexpected token .

似乎只要反应是导入别的东西,比如这个:

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集成的jest文档.问题是,开玩笑不能与其他东西一起工作,然后是js.所以你必须模拟你导入的所有无js文件.最简单的方法是moduleNameMapper在你的玩笑配置中配置一个.

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

一个__mocks__/styleMock.js看起来像这样.

module.exports = {};

Answer 2

最简单的是添加一个identity-obj-proxy包：

yarn add --dev identity-obj-proxy

并使用它自动模拟 CSS/SCSS 模块。

将其添加到package.json：

  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    }
  }

或以下内容jest.config.ts：

moduleNameMapper: {
  '\\.(css|scss)$': 'identity-obj-proxy'
}

这样，(S)CSS 模块类名称将在测试中自动检索。

这是来源。