使用Jest和React导入SCSS文件的SyntaxError

Question

我正在使用Jest进行测试，我的appication正在Next.js上运行...我正在尝试在我的Next应用程序中测试页面组件，但是我收到的错误显示在下面的屏幕截图中; ＆＃34;之前＆＃34; image是在我尝试实现solution found on Stackoverflow之前，以及＆＃34; After＆＃34;在解决方案实施之后。我仍然被困住，需要一些友好的帮助！

这也是我package.json

中当前的Jest配置

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

谢谢！

Answer 1

我使用CSS modules，方便我使用＆＃34;代理＆＃34;好像代码需要样式，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",

Answer 2

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

SyntaxError with Jest and React and importing CSS files