2017-04-18 9 views
0

CSSでネストされたインポートステートメントをサポートするPostCSSプラグインを作成しています。このユニットテストでは、テストの失敗で、その結果、期待:PostCSSプラグインのJestユニットテストで同等性をテストする適切な方法

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 
}" 
:中

.vendor { background: silver; } 

結果:

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は次のようになります

ここにプラグインコードがあります:https://github.com/eriklharper/postcss-nested-import/blob/master/index.js#L36-L57

私は間違っていると思いますか? PostCSSやJest、あるいはその両方の問題であるかどうかはわかりません。

答えて

0

PostCSSでもJestでも問題ありません!

JCSが1行の宣言と比較している間、PostCSSはインデントされたCSSで文字列を返しています。結果は2つの異なる文字列が比較されます。

幸いにも、あなたは無限の方法で修正するかもしれません。

比較する前に、実際の結果と期待される結果の両方がおそらくminifyになります。

プロジェクトでもっとクールなものをお使いになる場合は、extend Jest default matcherという形式の異なるCSS文字列を比較することができます。

関連する問題