css – 导入的样式对象在Jest中为空

我有一个组件： import React from 'react';import * as styles from './RedComponent.css';class RedCompone

... . . 我有一个组件：

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.

.

解决方法

. 你必须改变这一行

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

对此：

import styles from './RedComponent.css';

我假设你正在使用css-loader或类似的,这就是加载器的工作原理.

. . .. ...