React JS Jest导致"语法错误:意外的令牌。"

时间:2017-01-25 01:31:10

标签: reactjs jestjs babel-jest

我现在使用反应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。 感谢

3 个答案:

答案 0 :(得分:18)

查看webpack integration的jest文档。问题是,开玩笑不能与其他东西一起工作,然后是js。所以你必须模拟你导入的所有无js文件。最简单的方法是在您的开玩笑配置中配置moduleNameMapper

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

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

module.exports = {};

答案 1 :(得分:0)

我摆脱这种方式的方法是将这两行添加到我的.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"
  }
}

答案 2 :(得分:0)

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

这是source