Как мне написать хорошие тестовые снимки?

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 или что-то еще? Почему?