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

Question

我正在尝试测试使用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类.

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

UPDATE

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

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

错误:"bar"CSS模块未定义.

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

另外我发现如果我调试Foo组件中的样式:

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

它返回一个空输出:

风格{}

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

Answer 1

正如评论中所述的OP所述,问题在于Mocha正在使用ignore-styles选项运行.这与errorWhenNotFound: false选项一起掩盖了实际问题,即模块导出的样式对象实际上是空的,模块被Mocha忽略.

如果没有该选项,您仍需要指示Mocha导入CSS模块并正确解析它.该/var/www/web/app/components/Icon.css: Leading decorators must be attached to a class声明错误可能是由于该摩卡试图解释的CSS文件JS,这显然失败的内容的事实.

要正确设置,请查看:https: //gist.github.com/mmrko/288d159a55adf1916f71

我的想法是做这样的事情:

var hook = require('css-modules-require-hook')
var sass = require('node-sass')

hook({
  extensions: [ '.scss', '.css' ],
  generateScopedName: '[local]___[hash:base64:5]',
  preprocessCss: ( data, file ) => sass.renderSync({ file }).css
})

在您的Mocha条目文件中(在您执行任何其他操作之前),告诉它如何处理css/sass文件.

例如,您可以将该要点的内容放在test/setup.js文件中,然后以这种方式运行Mocha:

mocha --compilers js:babel-register --require ./test/setup.js \"./test/**/*.spec.js\"

这样,您的setup.js初始化代码将在测试之前运行.