Jest 和 React 导入 SCSS 文件时出现 SyntaxError答案

【问题标题】：SyntaxError with Jest and React importing SCSS filesJest 和 React 导入 SCSS 文件时出现 SyntaxError
【发布时间】：2018-04-24 21:43:01
【问题描述】：

我正在使用 Jest 进行测试，并且我的应用程序正在 Next.js 上运行...我正在尝试在我的 Next 应用程序中测试页面组件，但我收到以下屏幕截图中显示的错误； “之前”图像是在我尝试实施solution found on Stackoverflow 之前，而“之后”是在实施解决方案之后。我仍然陷入困境，需要一些友好的帮助！

这也是我在package.json 中的当前 Jest 配置

"jest": {
  "setupFiles": ["./shim.js", "./setupTests.js"],
  "verbose": true,
  "moduleNameMapper": {
    "^.+\\.(css|scss)$": "./cssStub.js"
  }
}

谢谢！

【问题讨论】：

标签： javascript reactjs unit-testing jestjs

【解决方案1】：

我正在使用CSS modules，我可以方便地使用“代理”，就好像代码需要样式一样，jest 将返回一个代理，它将返回所需的字段名称而不是值。

例如：

import * as styles from './styles.scss';

console.log(styles.someClassName);
// the proxy in that case will return a string with `someClassName` value.

所有你需要配置的是安装 npm install --save-dev identity-obj-proxy 并添加

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

到package.json file 中的 Jest 部分。

编辑

注意根据docs你应该使用<rootDir> 当您映射到文件时。 "\\.(css|scss)$": "<rootDir>/cssStub.js.js",

【讨论】：

有趣。感谢您的回答！但是，该项目没有使用 CSS 模块，所以我不确定这是否是我正在寻找的解决方案。
编辑了我的答案

【解决方案2】：

我的问题很愚蠢，以至于我错误地指定了我的 <rootDir> 路径。我建议阅读这篇文章中的解决方案，以获取有关如何解决类似问题的更多详细信息...谢谢大家的帮助！

SyntaxError with Jest and React and importing CSS files

【讨论】：