单元测试 – 使用Mocha和Enzyme测试使用React CSS模块的React组

这是一个示例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类.

知道如何解决这个问题吗？

UPDATE

正如fabio的评论中所建议的,我试图删除选项errorWhenNotFound：false

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

Error: “bar” CSS module is undefined.

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

另外我发现如果我在Foo组件中调试样式：

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

它返回一个空输出：

STYLES {}

虽然在这个简化的示例和完整的代码中,组件在Web应用程序生成的html代码中生成预期的html类,相应的样式工作正常.