快照测试中export语句内写入数字1的意义解析

嘿，这个问题问到点子上了！我来给你唠唠快照测试里这个数字后缀的来龙去脉～

一、数字1的技术意义 #

这个数字本质是快照的唯一标识后缀，是Jest（目前最主流的快照测试工具）自动生成的，用来标记这是某个测试用例下的第几个快照。比如你看到的exports[renders correctly 1]，就代表这是名为renders correctly的测试用例生成的第一个快照。

二、为什么要采用这种写法？ #

主要是为了解决同测试用例下多快照的区分与管理问题，具体来说有这几个原因：

• 避免快照覆盖：如果你的同一个测试用例里多次调用toMatchSnapshot()（比如测试组件在不同状态、不同props下的渲染结果），Jest需要给每个快照分配唯一的键名，数字后缀就是最简洁的自动区分方式——第一次是1，第二次是2，以此类推，绝不会互相覆盖。
• 提升快照可读性：有了数字后缀，你能快速对应到测试代码里的断言顺序，比如看到renders correctly 3，就知道这是该测试里的第三次快照断言，排查问题时能快速定位到对应的测试场景。
• 解决命名冲突：万一出现两个测试用例的描述文本完全相同（虽然不推荐这么写，但实际开发中偶尔会发生），数字后缀能保证每个快照的键是全局唯一的，不会导致快照文件出现键名重复的错误。

举个实际场景的例子：假设你有一个用户头像组件，测试里要断言“默认头像”“带用户名的头像”“带徽章的头像”三种渲染结果，在同一个it('renders avatar correctly', () => { ... })里三次调用toMatchSnapshot()，那生成的快照就会是：

exports[`renders avatar correctly 1`] = `...`; // 默认头像
exports[`renders avatar correctly 2`] = `...`; // 带用户名的头像
exports[`renders avatar correctly 3`] = `...`; // 带徽章的头像

当然啦，如果你觉得数字后缀不够直观，也可以给快照自定义名称，比如toMatchSnapshot("with username")，这样快照键就会变成exports[renders avatar correctly with username]，但数字后缀是Jest默认的、无需额外配置的自动命名方案，简单高效。

内容的提问来源于stack exchange，提问作者user8152190