jest 和 vitest 中的快照测试是检测代码输出中意外变化的强大工具。然而，在处理动态值（例如生成的 id 或随每次测试运行而变化的时间戳）时，它们很容易崩溃。虽然模拟这些值是可能的，但它可能会导致意想不到的副作用。
考虑可以从 api 调用或数据库查询返回的用户对象：
1
2
3
4
5
const user = {
id: crypto.randomuuid(),
name: "john doe",
createdat: new date().toisostring()
};
每次运行测试时，id 和createdat 值都会不同，导致快照失败。
基本实现
以下是如何创建一个自定义序列化器，用一致的占位符替换动态值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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] 占位符：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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",
}
`);
});
使其可重复使用
如果我们需要处理多个动态属性怎么办？让我们创建一个可重用的解决方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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,
);
},
};
};
在测试中，您可以为不同的属性创建多个序列化器：
1
2
expect.addsnapshotserializer(replaceproperty(id, [id]));
expect.addsnapshotserializer(replaceproperty(createdat, [timestamp]));
我经常使用这些序列化器，因此我创建了 npm 包快照序列化器来让每个人都更容易使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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()，该函数将根据用户类型建议所有可能的属性名称。任何其他属性都会导致 typescript 错误。
以上就是如何使用序列化器从快照中删除动态值的详细内容，更多请关注php中文网其它相关文章！