Що не варто тестувати у Vue-компонентах і чим небезпечні тести-знімки?

Тест має ламатися, коли ламається поведінка, і не ламатися, коли код переписали без зміни поведінки. Тести, що перевіряють деталі реалізації, роблять навпаки.

Деталі реалізації, яких не варто торкатися:

• внутрішній стан через wrapper.vm: expect(wrapper.vm.isOpen).toBe(true). Перейменували змінну чи перенесли стан у composable - тест впав, хоча все працює. Перевіряйте, що меню видно;
• виклики приватних методів: «після кліку викликався handleClick» - а не «після кліку з'явилось повідомлення»;
• структура дочірніх компонентів і CSS-класи, що відповідають за вигляд;
• кількість рендерів і порядок внутрішніх викликів, якщо це не вимога продуктивності.

Що тестувати:

• вхід: props, введення й дії користувача, відповіді API, стан сторів;
• вихід: що відрендерено, які події випромінено, які запити й дії стора викликано, куди перейшов маршрутизатор.

Тести-знімки (snapshots) зберігають HTML компонента у файл і порівнюють з ним при наступних запусках:

expect(wrapper.html()).toMatchSnapshot()

Чим вони небезпечні:

• падають від будь-якої зміни - додали клас, змінили текст, поміняли порядок атрибутів. Після кількох таких падінь команда звикає оновлювати знімки не дивлячись (vitest -u) - і знімок більше нічого не перевіряє;
• не кажуть, що саме важливо: у знімку на 200 рядків незрозуміло, яка частина - вимога, а яка - випадковість;
• великі знімки ніхто не рецензує в пул-реквестах.

Коли знімки доречні:

• маленькі й стабільні результати: відформатований рядок, згенерований фрагмент розмітки;
• вбудовані знімки (toMatchInlineSnapshot) - лежать прямо в тесті й видні при рецензії;
• як тимчасова страховка перед великим рефакторингом.

Ще кілька пасток:

• покриття заради покриття: 100% рядків не означає, що перевірено важливе. Краще 70% з тестами граничних випадків і помилок;
• тестування бібліотек: не потрібно перевіряти, що v-model чи Vue Router працюють - це вже протестовано;
• дублювання логіки в тесті: обчислювати очікуване значення тим самим алгоритмом, що й код, - тест завжди «зелений», навіть якщо алгоритм хибний. Очікування задають явними значеннями.

Докладніше в документації: Тестування у Vue