使用Mocha和Enzyme测试使用React CSS模块的React组件

我正在尝试测试使用React CSS模块的组件的生成类

这是一个示例Foo组件：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Foo.css';

const Foo = ({ className })  => <div styleName={className} />;

Foo.propTypes = {
  className: React.PropTypes.string.isRequired,
};

export default CSSModules(Foo, styles, { allowMultiple: true, errorWhenNotFound: false });

测试代码（Foo.spec.jsx）：

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Foo from '../../../app/components/Foo';

describe('<Foo/>', () => {
    it.only('should return a className prop as class value', () => {
      const wrapper = shallow(<Foo className="bar" />);
      console.log('DEBUG----->', wrapper.html());
    });
});

Foo.css代码：

.bar {
  background-color: red;
}

这是测试html输出：

DEBUG-----> <div></div>

如您所见，它会生成一个没有任何类的空div，因此没有断言起作用。

我也想提出一个事实，那就是它仅在测试中失败，该组件在Web应用程序生成的html代码中生成了预期的html类。

任何想法如何解决这个问题？

更新

如法比奥的评论所建议，我试图删除该选项 errorWhenNotFound: false

现在测试给出以下错误信息：

错误：“ bar” CSS模块未定义。

我不明白，因为bar类是在Foo.css文件中定义的。

我还发现，如果我调试Foo组件中的样式：

import styles from './Foo.css';
console.log('STYLES', styles);

它返回一个空的输出：

样式{}

尽管在此简化示例中以及在完整的代码中，该组件都在Web应用程序生成的html代码中生成了预期的html类，并且具有良好的相应样式。