开玩笑地模拟 css 模块答案

【问题标题】：Mocking css modules in jest开玩笑地模拟 css 模块
【发布时间】：2018-08-06 11:31:55
【问题描述】：

在我的测试中，我正在导入一个 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 错误。

我做错了什么？

【问题讨论】：

标签： css jestjs

【解决方案1】：

我不知道你是否还有这个问题，因为这个问题大约 6 个月大，但我认为你应该将你的文件命名为 CSSStub.js 而不是 CSSStub.css。

【讨论】：

【解决方案2】：

这解决了我的问题

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

错误：

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

【讨论】：

【解决方案3】：

identity-obj-proxy 不适用于默认导出。

尤其是 joaovieira 的评论似乎不错。

这是 identity-obj-proxy 的替代实现，适用于默认导出。

【讨论】：