Question

我正在编写一个PostCSS插件来支持CSS中的嵌套导入语句，我遇到了这个问题，我的单元测试返回的输出略有不同，导致测试失败：

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的问题，还是两者兼而有之？

Answer 1

PostCSS和Jest都没有问题！

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

幸运的是，你可能会以无尽的方式解决它。

在比较之前，最简单的可能是minify实际和预期的结果。

如果您希望项目更酷，可以extend Jest default matcher，以便能够比较不同格式的CSS字符串。

在PostCSS插件的Jest单元测试中测试相等性的正确方法

1 个答案: