2017-04-18 62 views
0

我正在写一个PostCSS插件来支持CSS中的嵌套导入语句,并且我遇到了这个问题,其中我的单元测试返回的输出略微不同于我所期望的,导致测试失败:正确的方法来测试一个PostCSS插件的Jest单元测试中的相等性

var postcss = require('postcss'); 

var plugin = require('./'); 

function run(input, output, opts) { 
    return postcss([ plugin(opts) ]).process(input) 
    .then(result => { 
     expect(result.css).toEqual(output); 
     expect(result.warnings().length).toBe(0); 
    }); 
} 


it('replaces @import with the contents of the file being imported.',() => { 
    return run('@import "./vendor.css";', 
      ".vendor { background: silver; }"); 
}); 

./vendor.css看起来是这样的:

.vendor { background: silver; } 

结果:

FAIL ./index.test.js 
replaces @import with the contents of the file being imported. 

expect(received).toEqual(expected) 

Expected value to equal: 
    ".vendor { background: silver; }" 
Received: 
    ".vendor { 
    background: silver 
}" 

这里的插件代码:https://github.com/eriklharper/postcss-nested-import/blob/master/index.js#L36-L57

任何想法我做错了什么?我不知道这是PostCSS或Jest还是两者的问题?

回答

0

在PostCSS和Jest中都没有问题!

PostCSS正在返回一个带缩进CSS的字符串,而Jest将其与单行声明进行比较。结果是2个不同的字符串进行比较。

幸运的是,你可以用无穷的方式修复它。

最微不足道的可能是minify比较前的实际和预期结果。

如果您想为您的项目寻找更酷的设备,您可能需要extend Jest default matcher,以便能够比较不同格式的CSS字符串。