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

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. （可能，我知道这将如何工作）我应该通过巧妙地使用返回签名类型和输入类型以某种方式使这一切成为类型安全的

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

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

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