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。

- user3006967

---

你可以在你的 .babelrc 文件中尝试使用 "ignore": [".css",".scss"] 来忽略这些文件。 - Hosar

可能会有帮助：https://dev59.com/-1kS5IYBdhLWcg3w05aT - fumihwh

我在babelrc中使用了以下代码： { "presets": ["es2015", "react"], "ignore": [".css",".scss"] } 但是当我运行npm test时，仍然出现相同的错误。你有什么想法吗？ - user3006967

关于 "package.json"：是否意味着使用了 Node.js？ - Peter Mortensen

Answer 1

请查看 Jest 文档中关于 Webpack 集成 的内容。问题在于 Jest 无法处理除了 JavaScript 之外的其他文件。因此，您必须模拟导入的所有非 JavaScript 文件。最简单的方法是在 Jest 配置中配置一个 moduleNameMapper。

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

有一个__mocks__/styleMock.js，它看起来像这样。

module.exports = {};

- Andreas Köberle

---

聪明的解决方案！这是唯一能使它工作的方案。谢谢。 - user3006967

我在哪里可以找到：mocks/styleMock.js？或者，如果这是我需要创建的东西，它应该放在哪个文件夹下？抱歉，如果这很明显，我是jest的新手，目前被卡住了。非常感谢帮助！ - toasty

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模块的类名。

这里是源代码。

- Neurotransmitter

Answer 3

1. npm i -D identity-obj-proxy

2. Add the below to file jest.config.js

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

3. File jest.config.js:

   testEnvironment: 'jsdom',
   

- Not Again

---

它对我的应用程序有效。但我不明白为什么其他答案不起作用。 - Kayra Berk Tuncer

为什么它能工作？这是什么想法？在什么环境下？请通过编辑（更改）您的答案来回答，而不是在评论中回答（但请勿添加“编辑：”，“更新：”或类似内容 - 答案应该看起来像今天写的）。 - Peter Mortensen

Answer 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"
  }
}

- Cyclotron3x3

---

为什么它能工作？这是什么想法？在什么环境下？目前这个答案太简洁了。（但请不要包含“编辑：”，“更新：”或类似的内容 - 答案应该看起来像今天写的一样。） - Peter Mortensen