React JS Jest causing "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 不能与其他东西一起使用，然后是 js。所以你必须模拟你导入的所有 none js 文件。最简单的方法是在你的 jest 配置中配置一个 moduleNameMapper。

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

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

module.exports = {};

Answer 2

我解决这个问题的方法是将这两行添加到我的 .babelrc 文件

{
    "presets": ["env", "react"],
    "plugins": ["transform-class-properties"]
}

我的 package.json 看起来像这样：

{
  "name": "crud-redux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "react-scripts": "1.1.4"
},
 "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "NODE_ENV=test jest",
     "eject": "react-scripts eject"
},
  "devDependencies": {
      "babel-jest": "^18.0.0",
      "babel-loader": "^6.4.1",
      "babel-plugin-transform-decorators-legacy": "^1.3.5",
      "enzyme": "^2.9.1",
      "jest": "^23.1.0",
      "react-addons-test-utils": "^15.6.2",
      "react-test-renderer": "^15.6.2",
      "redux-mock-store": "^1.5.1",
      "webpack": "^1.15.0",
      "webpack-dev-server": "^1.16.5"
  }
}

Answer 3

最简单的是添加一个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 模块 class 名称将在测试中自动检索。

这里是 source.

Answer 4

npm i -D identity-obj-proxy
在下面添加到jest.config.js

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

jest.config.js:

testEnvironment: 'jsdom',

React JS Jest causing "SyntaxError: Unexpected token ."

React JS Jest causing "SyntaxError: Unexpected token ."

reactjs

jestjs

babel-jest