How should I write good snapshot tests?

When composing snapshot tests, I need to do sequences of interactions. So for example, selecting the “merchandise” catalog looks like this:

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

But say I now need to click the “add selection” button, which is only clickable/present when an option in the middle column has been selected:

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

This function will need to select the merchandise catalog, and then click on “electronics” (for example).

Should:

1. the function which executes this “action” execute all the previous steps needed for this to happen? (then its not composable, but its safe)
2. this function should exist on its own, and its up to you to ensure you’re using it right
3. this function should throw an error if there’s something wrong
4. (potentially, idk how this would work) I should make this all typesafe somehow through clever use of return signature types, and input types

Option 1 inevitably beings to look like functions which are shaped together like attached picture, but I’m not sure how to make them safely independently composable.

Another relevant link: https://kentcdodds.com/blog/effective-snapshot-testing

Should I take approach 1, 2, 3, 4, or something else? Why?