Jest 中导入的样式对象为空

Question

我有一个组件：

import React from 'react';
import * as styles from './RedComponent.css';

class RedComponent extends React.Component {
  render () {
    return <div className={ styles.red }></div>;
  }
}

这是测试用例：

describe('Test suite', () => {
  test('RedComponent tests', () => {
    const wrapper = shallow(<RedComponent />);
});

console.log(wrapper.debug()); 给出

<div className={[undefined]}></div>

而不是

<div className="RedComponent__red"></div>

如果我控制导入的样式，我会得到

console.log(styles); // {default: {}}

这仅在 Jest 测试用例中。当应用程序在浏览器中呈现时，样式不是未定义的。

我的笑话配置：

{
  "moduleFileExtensions": [
    "js"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleNameMapper": {
    "\.(css|less)$": "identity-obj-proxy"
  },
  "setupFiles": [
    "./test-setup.js"
  ],
  "collectCoverageFrom": [
    "src/**/*.{js}",
    "!**/node_modules/**"
  ],
  "testEnvironment": "node",
  "transform": {
    "^.+\.js$": "babel-jest",
    "\.(md|ttf|txt|eot|ico|otf|svg|png|gif|woff2|woff|jpeg)$": "./file-transformer.js"
  }
}

使用 jest v21.2.1、identity-obj-proxy v3.0.0 和 React v16.0.0。

Answer 1

也许值得检查示例： https://github.com/keyanzhang/jest-css-modules-example/

我觉得你的moduleNameMapper应该是这样的：

"^.+\.(css|less)$": "identity-obj-proxy"

Answer 2

您必须更改此行

import * as styles from './RedComponent.css';

对此：

import styles from './RedComponent.css';

我假设您正在使用 css-loader 或类似的，这就是加载程序的工作方式。

Answer 3

创建一个包含以下内容的 jest/identity-obj-proxy-esm.js 文件：

// This works around the fact we use ES named exports for styles, e.g.:
// import * as styles from './styles.scss'.
// https://github.com/keyanzhang/identity-obj-proxy/issues/8
module.exports = new Proxy(
  {},
  {
    get: function getter(target, key) {
      if (key === '__esModule') {
        // True instead of false to pretend we're an ES module.
        return true;
      }
      return key;
    },
  },
);

编辑jest.config.js:

// jest.config.js

module.exports = {
  ...
  moduleNameMapper: {
    ...
    '\.(css|scss)$': '<rootDir>/jest/identity-obj-proxy-esm.js',
  }
};

若昂维埃拉和https://github.com/keyz/identity-obj-proxy/issues/8#issuecomment-430241345

Jest 中导入的样式对象为空

Imported styles object is empty in Jest

css

reactjs

jestjs

css-modules