在与盖茨比一起使用酶时显示sass css模块

所以，当我使用酶来测试一个使用css模块的组件时，我遇到了一些问题。或者我应该说filename.module.scss

当我做以下事情时会发生什么：

const wrapper = shallow(<MyComponent {...data}/>);
console.log('wrapper = ', wrapper.debug());

const wrapper=shallow（）；
log（'wrapper='，wrapper.debug（））；

我的调试工作并显示我的组件结构，其中包含我的所有div。问题是，在运行测试期间，没有添加任何样式。但是，当我运行盖茨比发展的风格越来越多所以我只想在测试模式下清楚一点，我看不到添加到我的组件中的样式

MyComponent.js

import React, { Component } from 'react';
import styles from ‘./MyComponent.module.scss';

class MyComponent extends Component {

  render() {
    const {
      name,
    } = this.props;

    return (
      <React.Fragment>
        <div className={styles.header}>
        <div className={styles.name}>{name}</div>
        </div>
      </React.Fragment>
    );
  }
}

import React，{Component}来自'React'；
从“/MyComponent.module.scss”导入样式；
类MyComponent扩展组件{
render（）{
常数{
名称
}=这是道具；
返回(
{name}
);
}
}

我的调试将所有样式显示为未定义的，这让我抓狂，因为如果存在div，我无法基于样式名称进行测试

这是我的jest软件包设置

  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
    },
    "setupFiles": [
      "<rootDir>/.jest/setupFiles.js"
    ]
  }

“开玩笑”：{
“moduleNameMapper”：{
“\\（css | scss）$”：“/.jest/styleMock.js”
},
“设置文件”：[
“/.jest/setupFiles.js”
]
}

适用于遇到此问题的任何其他人

npm install identity-obj-proxy

然后将其添加到package.json中

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|sass|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "<rootDir>/.jest/setupFiles.js"
    ]
  }

“开玩笑”：{
“moduleNameMapper”：{
“+\ \（css | styl | sass | scss）$”：“身份对象代理”
},
“设置文件”：[
“/.jest/setupFiles.js”
]
}

---

希望这对别人有帮助

是的！非常感谢。