React JS Jest 导致“SyntaxError: Unexpected token ”。

Posted 2023-02-22

【中文标题】React JS Jest 导致“SyntaxError: Unexpected token ”。

【英文标题】：React JS Jest causing "SyntaxError: Unexpected token ."

【发布时间】：2017-06-10 01:34:05

【问题描述】：

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

【问题讨论】：

你可以在你的 .babelrc 中尝试："ignore": [".css",".scss"]

***.com/questions/39418555/… 或许有帮助

我在 babelrc 中使用了这个： "presets": ["es2015", "react"], "ignore": [".css",".scss"] 在运行 npm test 时，同样的错误。有什么想法吗？

【参考方案1】：

查看webpack integration 的笑话文档。问题是 jest 不能与 js 之外的其他东西一起使用。所以你必须模拟你导入的所有无 js 文件。最简单的方法是在您的 jest 配置中配置 moduleNameMapper。

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

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

module.exports = ;

【讨论】：

智能解决方案！这是使它工作的唯一一个。谢谢

在哪里可以找到：__mocks__/styleMock.js？或者，如果它是我需要创建的东西，它应该放在哪个文件夹下？抱歉，如果这很明显，我是开玩笑的新手，我现在很困惑。非常感谢您的帮助！

【参考方案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 模块类名将在测试中自动检索。

这里是source。

【参考方案3】：

npm i -D identity-obj-proxy

在 jest.config.js 中添加以下内容

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

jest.config.js：

testEnvironment: 'jsdom',

【参考方案4】：

我解决这个问题的方法是将这两行添加到我的 .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"