npm 包 @smpx/snap-shot-it 使用教程

介绍

@smpx/snap-shot-it 是一个前端测试工具，用于比较预期输出和实际输出是否匹配。它可以用来测试函数或组件的输出。场景包括但不局限于：React 组件、Redux 和 MobX 状态管理器、i18n 翻译等等。

安装

使用 npm 安装 @smpx/snap-shot-it：

npm install --save-dev @smpx/snap-shot-it

使用方法

基本使用

首先，在测试文件中导入 @smpx/snap-shot-it：

import { snapshot } from '@smpx/snap-shot-it';

然后，在你的测试中，通过 snapshot 方法将预期的输出与实际输出进行比较：

test('add should return 5', () => {
  const result = add(2, 3);
  expect(snapshot(result)).toMatchSnapshot();
});

运行测试时，将会生成一个 .snap 文件，它包含了你的测试输出。如果你再次运行测试，并且测试结果与上一次不同，那么 snap 文件就会更新。你可以使用你最喜欢的版本控制工具来跟踪这些变化。

高级使用

如果你想要为每个测试添加其他信息，比如测试名或者忽略一些字段，你可以使用 second argument (snapshotOptions)。

test('add should return 5', () => {
  const result = add(2, 3);
  expect(snapshot(result, {
    myName: 'add should return 5',
    ignoreKeys: ['timestamp', 'extraInfo']
  })).toMatchSnapshot();
});

自定义快照生成器

你可以使用自定义生成器，来扩展 @smpx/snap-shot-it 的行为。比如，如果你想要添加一个自定义的序列化器：

-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------

----- ----------- ------- ----------------- -
  -------------- ---- -
    -- ---- ---------- -------- -
      ------ ---------------
    - ---- -
      ------ ---------------------
    -
  -
-

------------------------------------------

这里，我们使用 MyGenerator 来序列化 MyClass 类型的对象。

示例

下面，让我们来测试一个简单的函数：

function greet(name) {
  return `Hello, ${name}!`;
}

我们可以使用 @smpx/snap-shot-it 来测试 greet 函数是否会正确地打招呼：

import { snapshot } from '@smpx/kao-shot-it';

test('greet should return correct greeting', () => {
  expect(snapshot(greet('John'))).toMatchSnapshot();
});

这里，我们将 greet 函数的输出与快照进行比较。如果函数的输出与之前的快照相同，测试将通过。否则，测试将失败，你需要检查你的代码是否正确。

总结

现在，你已经了解了如何使用 @smpx/snap-shot-it 进行测试。它是一个方便易用的测试工具，可以帮助你更好地管理和维护你的项目。希望这篇文章对你有所帮助！

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