测试与摩卡和酶的使用阵营CSS模块阵营组件

我试图测试生成的类使用React CSS modules 测试与摩卡和酶的使用阵营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

为在法比奥我试图删除选项errorWhenNotFound: false

现在测试提供了以下错误消息的评论所说：

Error: "bar" CSS module is undefined.

哪个我不不明白，因为在Foo.css文件中定义了酒吧类。

而且我发现，如果我调试的Foo组件样式：

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

它返回一个空输出：在这个简单的例子

STYLES {}

虽然两者并在全成熟的代码组件在web应用程序中生成期望的html类生成的html代码，并且相应的样式工作正常。

来源

2016-10-04 rfc1484

如果您使用的WebPack，你有没有忽略导入的CSS文件具体的测试配置/装载机？可能是因为CSSModules没有找到该类名，并且错误被errorWhenNotFound：false（这也可以尝试删除它来帮助调试问题）忽略。 –

所以现在我们至少知道你为什么没有看到输出中的类。我仍然认为你有一些测试相关的配置或代码忽略了css文件的内容，如下所示：https://www.npmjs.com/package/ignore-styles这在测试中很常见。你可以发布你完整的webpack配置你用于测试吗？你使用摩卡作为测试跑步者吗？你是否想做任何与https://github.com/airbnb/enzyme/issues/202相关的事情？ –

我觉得你中了大奖！ Mocha正在使用'ignore-styles'选项执行，现在这个问题已经解决，正在生成以下错误消息：'SyntaxError：/var/www/web/app/components/Icon.css：必须附加主要的装饰器以类声明“ 但现在至少它是一个不同的问题。 – rfc1484

由于OP在评论中声明，问题在于Mocha使用ignore-styles选项运行。这与errorWhenNotFound: false选项一起掩盖了实际问题，即由模块导出的样式对象实际上是空的，该模块被Mocha忽略。

如果没有该选项，您仍然需要指示Mocha导入CSS模块并正确解析它。 /var/www/web/app/components/Icon.css: Leading decorators must be attached to a class声明错误可能是由于Mocha试图将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 
})

在摩卡项文件

（你做任何事情之前），告诉它如何处理css/sass文件。

你可以把例如测试/ setup.js文件里面那个要点的内容，然后以这种方式运行摩卡：

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

这样，你的setup.js初始化代码将运行在测试之前。

来源

2016-10-11 10:23:49

什么是摩卡条目？ –

@angrykiwi我的意思是在运行实际测试之前用摩卡需要的文件（因此在“入口点”中是“入口”）。查看我的帖子中的最后一条命令，我将两个文件路径传递给--require标志。第一个是我所谓的“入门”，第二个是包含所有实际测试文件的glob。您希望setup.js中的代码在其他任何操作之前运行，以便您可以指示mocha如何编译待测代码所需的sass文件。 –

你有没有完全集成的反应&& css模块和摩卡测试的例子？ –

感谢您的回答！如果你不关心SASS你也可以做到这一点...

import hook from 'css-modules-require-hook' 

hook({ 
    generateScopedName: '[local]___[hash:base64:5]', 
})

来源

2017-01-10 12:07:03 Andre

测试与摩卡和酶的使用阵营CSS模块阵营组件

回答

相关问题