当使用酶与gatsby时，让sass css模块显示出来

Question

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

当我做类似的事情时会发生什么：

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

我的调试工作并显示我的组件结构与所有我的div在那里。问题是我的样式都没有在运行测试中添加。但是当我运行Gatsby开发时，风格正在增加。所以只是在测试模式中要清楚，我没有看到添加到我的组件的样式！

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>
    );
  }
}

我的调试显示所有样式为undefined，这让我发疯，因为如果存在div，我无法根据样式名称进行测试。

这是我的开玩笑包装设置。

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

Answer 1

对于其他遇到此问题的人。

npm install identity-obj-proxy

然后将其添加到package.json中

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

希望这有助于某人。