npm 包 jest-multiline-matchers 使用教程

介绍

在前端开发中，测试是非常必要的一个环节。而 jest 是一个流行的 JavaScript 测试框架，它提供了广泛的测试能力，可以让开发者轻松地编写和运行测试用例。不过，jest 默认的匹配器在处理多行字符串时很难根据预期内容精确匹配，这就导致了一些测试用例无法正确通过。为了解决这个问题，开发者可以使用 jest-multiline-matchers 包提供的自定义匹配器。

安装

使用 npm 安装 jest-multiline-matchers：

npm install jest-multiline-matchers --save-dev

使用

在使用 jest-multiline-matchers 之前，需要向 jest 注册这些自定义匹配器。在你的测试用例文件中，将以下代码添加到顶部即可：

const { toMatchMultiLineSnapshot } = require('jest-multiline-matchers');

expect.extend({ toMatchMultiLineSnapshot });

现在，就可以使用 toMatchMultiLineSnapshot 匹配器来比较多行字符串了。例如：

test('should match multiline string', () => {
  const str = `hello
                world`;
  expect(str).toMatchMultiLineSnapshot();
});

在运行测试后，jest 会自动生成一个标准格式的快照文件，以便您随时回归和比较。举个例子，如果一个名为 myTest 的测试用例通过 expect 输出多行字符串：

test('myTest', () => {
  const message = "line1\nline2\nline3";
  expect(message).toMatchSnapshot();
});

则 jest 会自动生成一个与测试中 expect 输出的 message 字符串匹配的快照文件，内容如下：

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`myTest 1`] = `
"line1
line2
line3"
`;

如果在之后的测试中，变量 message 的值与初始值不同，toMacthSnapshot 方法会用新值覆盖且更新快照文件。

但是，这种方法无法适应多行字符串的情况。例如，在一个名为 multilineTest 的测试用例中：

test('multilineTest', () => {
  const message = `line1
 line2
 line3
 `;
  expect(message).toMatchSnapshot();
});

jest 将无法正确生成快照文件。这时，就需要使用 jest-multiline-matchers 提供的 toMatchMultiLineSnapshot 方法。

在顶部导入 toMatchMultiLineSnapshot 方法，并将其添加到 expect 的 extend 中：

const { toMatchMultiLineSnapshot } = require('jest-multiline-matchers');

expect.extend({ toMatchMultiLineSnapshot });

然后，使用 toMatchMultiLineSnapshot 方法进行对比。对于以上列举的多行字符串情形：

test('multilineTest', () => {
  const message = `line1
 line2
 line3
 `;
  expect(message).toMatchMultiLineSnapshot();
});

jest 会自动生成一个与测试中 expect 输出的 message 字符串匹配的快照文件，内容如下：

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`multilineTest 1`] = `
"line1
 line2
 line3
"
`;

toMacthMultiLineSnapshot 方法会自动去除多行字符串开头及结尾的空格和空行，生成标准的快照文件。

总结

使用 jest-multiline-matchers 提供的 toMatchMultiLineSnapshot 方法，可以轻松地在多行字符串的测试中快速生成想要的快照文件。它可以广泛地应用于模板字符串、JSON、XML 等复杂的多行字符串中，大大提高了 jest 编写测试用例的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6795