如何使用序列化器从快照中删除动态值

jest 和 vitest 中的快照测试是检测代码输出中意外变化的强大工具。然而，在处理动态值（例如生成的 id 或随每次测试运行而变化的时间戳）时，它们很容易崩溃。虽然模拟这些值是可能的，但它可能会导致意想不到的副作用。

考虑可以从 api 调用或数据库查询返回的用户对象：

const user = {
  id: crypto.randomuuid(),
  name: "john doe",
  createdat: new date().toisostring()
};

每次运行测试时，id 和createdat 值都会不同，导致快照失败。

基本实现

以下是如何创建一个自定义序列化器，用一致的占位符替换动态值：

const property = 'id';
const placeholder = '[id]';

expect.addsnapshotserializer({
  test(val) {
    return val && typeof val === 'object' && object.hasown(val, property) && val[property] !== placeholder
  },
  serialize(val, config, indentation, depth, refs, printer) {
    return printer(
      {
        ...(val as record<string, unknown>),
        [property]: placeholder,
      },
      config,
      indentation,
      depth,
      refs,
    );
  },
});

您可以使用expect.addsnapshotserializer()添加自定义快照序列化器。
它需要一个具有两个功能的对象：

• test() 用于确定是否应使用此自定义序列化器。它检查 expect(value) 中的值是否是具有该属性的对象并且未被占位符替换。

• serialize() 仅当 test() 返回 true 时才会被调用。它用占位符替换属性，并调用 printer() 函数将值序列化为类似 json 的字符串。

测试

现在，当您运行测试时，您将看到 id 已替换为 [id] 占位符：

interface user {
  id: string;
  name: string;
  createdat: string;
}

expect.addsnapshotserializer({ /* ... */ });

test('snapshot', () => {
  const user: user = {
    id: '123e4567-e89b-12d3-a456-426614174000',
    name: 'john doe',
    createdat: '2024-03-20t12:00:00z',
  };

  expect(user).tomatchinlinesnapshot(`
    {
      "id": "[id]",
      "name": "john doe",
    }
  `);
});

使其可重复使用

如果我们需要处理多个动态属性怎么办？让我们创建一个可重用的解决方案：

export const replaceproperty = (
  property: string,
  placeholder: string,
): snapshotserializer => {
  return {
    test(val) {
      return val && typeof val === 'object' && object.hasown(val, property) && val[property] !== placeholder
    },
    serialize(val, config, indentation, depth, refs, printer) {
      return printer(
        {
          ...(val as record<string, unknown>),
          [property]: placeholder,
        },
        config,
        indentation,
        depth,
        refs,
      );
    },
  };
};

在测试中，您可以为不同的属性创建多个序列化器：

expect.addsnapshotserializer(replaceproperty('id', '[id]'));
expect.addsnapshotserializer(replaceproperty('createdat', '[timestamp]'));

我经常使用这些序列化器，因此我创建了 npm 包快照序列化器来让每个人都更容易使用。

import { replaceProperty, removeProperty } from 'snapshot-serializers';

type User = {
  id: string;
  name: string;
  createdAt: string;
  password?: string;
};

// Type-safe property replacement
expect.addSnapshotSerializer(
  // TypeScript will only allow "id" | "name" | "createdAt" | "password"
  replaceProperty<User>({
    property: 'id',
    placeholder: '[ID]'
  })
);

// Remove properties entirely
expect.addSnapshotSerializer(
  removeProperty<User>({
    property: 'password'
  })
);

// This would cause a TypeScript error:
expect.addSnapshotSerializer(
  replaceProperty<User>({
    property: 'invalid' // Error: Type '"invalid"' is not assignable...
  })
);

它提供了类型安全的 api 来替换或删除快照中的属性。您可以提供一个通用类型参数，例如removeproperty<user>()，该函数将根据用户类型建议所有可能的属性名称。任何其他属性都会导致 typescript 错误。