如何允许 scss 开玩笑地对 typescript nextjs 进行单元测试？

Posted 2023-02-22

【中文标题】如何允许 scss 开玩笑地对 typescript nextjs 进行单元测试？

【英文标题】：How to allow scss in jest for unit testing for typescript nextjs?

【发布时间】：2020-06-13 21:07:36

【问题描述】：

我在 scss 导入时出错。我尝试过使用模型和identity-obj-proxy，但它们都不起作用。我想知道我的正则表达式是否有问题。

错误位于

 import utilityStyles from "~/scss/Utils.scss"; and `@import "~Scss/helpers/variables";`

在 package.json 我有

"preset": "ts-jest",
"moduleNameMapper": 
  "^~(.*)$": "<rootDir>/src/$1",
  "^src/(.*)$": "<rootDir>/src/$1",
  "^.*.(css|scss)$": "identity-obj-proxy"
,

在 index.d.ts 我有

declare module '*.scss' 
  const content:  [key: string]: string ;
  export default content;


declare module 'raw-loader!*' 
  const content: string
  export default content

更新

我认为问题是由于我的正则表达式造成的，所以我尝试了 "^(.*)(css|less|scss)$": "identity-obj-proxy" 但还是不行

【参考方案1】：

如果你是用来测试的，你可以这样做

   "jest": 
    "setupFiles": [
      "<rootDir>/tests/setupTest.js"
    ],
    "moduleNameMapper": 
      "\\.(scss|css|jpg|png|gif)$": "<rootDir>/tests/file.mock.js"
    
  ,

在 file.mock.js 中

module.exports = ;

【讨论】：

setupFiles 的用途是什么？

我认为你不需要尝试使用我的moduleNameMapper 设置

它不起作用，我做了同样的事情，除了将它放入 /__mocks__ 文件而不是 /tests

我认为我的正则表达式有问题