在Jest中模拟CSS模块

Question

在我的测试中，我正在导入一个jsx文件，该文件导入了css：

import styles from '~/shared/styles/Profile.css';

我正在尝试使用identity-obj-proxy模拟所有CSS文件，因为我正在使用css-modules。但似乎没有起作用。

Package.json

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

我也尝试过：

"jest": {
    "moduleNameMapper":{
      "^.+\\.(css|less)$": "<rootDir>/config/CSSStub.js"
    },

在创建CSSStub.css时

module.exports = {};

没有效果 - 仍然从Jest中解析CSS错误。

我做错了什么？

- Mindaugas

Answer 1

identity-obj-proxy无法与默认导出一起使用。

这个问题的评论对我很有帮助。https://github.com/keyz/identity-obj-proxy/issues/8

尤其是joaovieira的评论看起来不错。

这里提供了一个替代方案的实现，可以与默认导出一起使用。

https://github.com/keyz/identity-obj-proxy/issues/8#issuecomment-430241345

- Seiya

---

这个评论（为css模块文件添加类型定义）是解决我的问题的关键。 - Drazen Bjelovuk

Answer 2

这对我解决了问题

moduleNameMapper: {
    '^.+\\.(sass|css)$': '<rootDir>/__mocks__/styles.js'
  }

错误：

    Cannot find module 'myStyles.module.sass' from 'myComponent.js'

- willy

Answer 3

不知道你是否还遇到这个问题，因为这个问题已经6个月了，但是我认为你应该将文件命名为CSSStub.js而不是CSSStub.css。

- mfakhrusy