我应该如何编写良好的快照测试？

Question

在编写快照测试时，我需要进行一系列交互。因此，例如，选择“商品”目录如下：

const exploreMerchandiseCatalogAction = async element => {
  await aTimeout(2);
  element.service.send(hydrateEvent);
  await aTimeout(2);
  catalogSelectElement(element).click();
  await aTimeout(2);
  merchandiseCatalog(element).click();
};

但是说我现在需要单击“添加选择”按钮，仅当在中间列中选择了一个选项时，该按钮才可单击/显示：

const addSelectionAction = async element => { /* snip! */ }

此功能需要选择商品目录，然后单击“电子产品”（例如）。

应该：

1. 执行此“动作”的功能执行所有 发生此操作所需的先前步骤？ （然后它是不可组合的， 但很安全）
2. 此功能应该独立存在，并且要向上运行 给您，以确保您正确使用它
3. 该函数应该抛出 如果有问题，则报错
4. （可能是，idk如何 会起作用）我应该通过巧妙的方式使所有这些类型安全 返回签名类型和输入类型的使用

选项1不可避免地看起来像功能，它们的形状像所附的图片一样，但是我不确定如何使它们安全地独立地组合。

另一个相关链接：https://kentcdodds.com/blog/effective-snapshot-testing

我应该采用方法1、2、3、4还是其他方法？为什么？