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

你必须改变这一行

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

对此：

import styles from './RedComponent.css';

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