Question

我有一个组件：

ax = fig.add_axes([0.1,0.1,0.5,0.7])

这是测试用例：

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>

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

我的开玩笑配置：

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

使用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或类似的东西，这就是加载器的工作方式。

Answer 2

也许值得检查一下这个例子： https://github.com/keyanzhang/jest-css-modules-example/

我认为你的moduleNameMapper应该是这样的：

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

Jest中导入的样式对象为空

2 个答案: