npm 包 snap-shot-it 使用教程

介绍

snap-shot-it 是一个方便前端开发者进行快速快照测试的 npm 包。它可以通过对比当前代码与预设快照，自动检测出代码是否产生了变化。使用 snap-shot-it 可以大大减轻手动编写测试用例的工作量，并提高代码的可靠性。

安装

在项目目录下执行以下命令来安装 snap-shot-it：

npm install --save-dev snap-shot-it

基本使用

在测试文件中引入 snap-shot-it，并使用 expect 方法生成快照：

const { expect } = require('snap-shot-it');

describe('测试用例', () => {
  it('测试内容', () => {
    const result = 'hello, world';
    expect(result).toMatchSnapshot();
  });
});

在第一次运行测试时，snap-shot-it 会自动生成一个名为 __snapshots__ 的文件夹，并在其中生成一个以测试用例名称为文件名的快照文件。在之后的测试中，如果代码结果与快照文件不一致，将会提示测试失败。此时可以手动检查代码输出并决定是否更新快照文件。

进阶使用

自定义快照文件名

默认情况下，快照文件的名称与测试用例的名称相同。但是，在某些情况下，我们可能需要自定义快照文件名，例如对于使用了异步操作的测试用例。这时我们可以在调用 toMatchSnapshot 方法时传入自定义的文件名：

it('测试内容', async () => {
  const result = await fetchData();
  expect(result).toMatchSnapshot('fetch-data');
});

使用插件

snap-shot-it 支持使用插件来扩展其功能。例如，如果我们想要将快照文件保存到远程服务器上，可以使用 snap-shot-it-plugin-save-to-url 插件。首先安装插件：

npm install --save-dev snap-shot-it-plugin-save-to-url

然后在测试文件中引入该插件，并在配置中传入保存地址：

const { configure } = require('snap-shot-it');
const saveToUrlPlugin = require('snap-shot-it-plugin-save-to-url');

configure({
  plugins: [saveToUrlPlugin({ url: 'http://localhost/saveSnapshot' })],
});

只测试指定部分代码

有时候我们可能只需要测试代码的一部分输出是否符合预期。此时可以使用 toMatchSnapshot 的第二个参数，该参数是一个对象，其中 ignoreExtraFields 属性用于指定是否忽略额外的属性。

it('测试内容', () => {
  const data = { name: 'Alice', age: 18 };
  expect(data).toMatchSnapshot(undefined, { ignoreExtraFields: true });
});

总结

通过 snap-shot-it，我们可以轻松地进行快照测试，减少手动编写测试用例的工作量，提高代码的可靠性。在实际开发中，可以根据需要使用插件来扩展其功能，并通过自定义快照文件名和只测试指定部分代码等方式提高测试效率。

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