javascript - Jest 和 React 导入 SCSS 文件的语法错误

Question

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

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

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

谢谢!

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