Unit-тесты во фронтенде: 6 примеров с кодом, инструменты и подходы

Начнём с откровения: в Хекслете очень сильно топят за написание тестов) Поэтому в этом выпуске мы будем разбираться в Unit-тестировании, а в этом нам поможет Георгий Бузин, Frontend Team Lead в Junehomes:
– узнаем, зачем программистам писать Unit-тесты
– пройдёмся по инструментам тестирования – от простых к более сложным
– посмотрим, какие инструменты помогут в тестировании frontend
– напишем 6 тестов с помощью разных подходов и на практике поймём отличия

____
🔗 Полезные ссылки:
____
00:00:00 интро
00:00:21 зачем программистам писать Unit-тесты
00:01:37 что нужно тестировать
00:02:58 пирамида тестирования
00:04:57 необходимость тестирования
00:05:36 какие кейсы мы сегодня разбираем
00:06:34 как развивалось тестирование кода – эра SPA
00:08:12 Unit в других языках программирования и во фронтенде
00:09:27 Unit в NodeJS + ES5
00:10:07 как пишут Unit-тесты сейчас
00:10:48 кейс: простые тесты NodeJS с помощью describe, it и strictEqual
00:16:06 кейс: тестируем умножение и добавляем forEach
00:18:38 кейс: тестирование функций высшего порядка, mocking + expire
00:24:53 плюс использования Unit-тестов с mock
00:26:33 эмуляция DOM
00:27:38 кейс: native unit test с happy-dom
00:33:05 фреймворки Unit
00:35:35 кейс: пример тестирования компонента vitest + testing library
00:42:42 как используется expect
00:44:15 имеет ли значение сборка
00:46:45 test debug и test addiction, getbyRole, library user-event
00:53:56 тестирование с помощью renderHook
00:57:43 плюсы и минусы использования testing library
00:59:18 Snapshot тестирование
01:01:12 кейс: пример snapshot теста
01:03:02 плюсы и минусы использования Snapshot-тестов
01:04:53 проблемы jsdom и happy-dom
01:06:07 components тесты и headless browsers
01:09:43 пример компонентного теста в Playwright и cypress
01:20:26 плюсы и минусы компонентного тестирования
01:21:15 кейс: Screenshot тесты
01:26:18 плюсы и минусы Screenshot тестирования
01:26:55 для каких целей подходит каждый инструмент тестирования

#программирование #js #unittesting #хекслет

[HexletOrg]

00:00:00 интро
00:00:21 зачем программистам писать Unit-тесты
00:01:37 что нужно тестировать
00:02:58 пирамида тестирования
00:04:57 необходимость тестирования
00:05:36 какие кейсы мы сегодня разбираем
00:06:34 как развивалось тестирование кода – эра SPA
00:08:12 Unit в других языках программирования и во фронтенде
00:09:27 Unit в NodeJS + ES5
00:10:07 как пишут Unit-тесты сейчас
00:10:48 кейс: простые тесты NodeJS с помощью describe, it и strictEqual
00:16:06 кейс: тестируем умножение и добавляем forEach
00:18:38 кейс: тестирование функций высшего порядка, mocking + expire
00:24:53 плюс использования Unit-тестов с mock
00:26:33 эмуляция DOM
00:27:38 кейс: native unit test с happy-dom
00:33:05 фреймворки Unit
00:35:35 кейс: пример тестирования компонента vitest + testing library
00:42:42 как используется expect
00:44:15 имеет ли значение сборка
00:46:45 test debug и test addiction, getbyRole, library user-event
00:53:56 тестирование с помощью renderHook
00:57:43 плюсы и минусы использования testing library
00:59:18 Snapshot тестирование
01:01:12 кейс: пример snapshot теста
01:03:02 плюсы и минусы использования Snapshot-тестов
01:04:53 проблемы jsdom и happy-dom
01:06:07 components тесты и headless browsers
01:09:43 пример компонентного теста в Playwright и cypress
01:20:26 плюсы и минусы компонентного тестирования
01:21:15 кейс: Screenshot тесты
01:26:18 плюсы и минусы Screenshot тестирования
01:26:55 для каких целей подходит каждый инструмент тестирования

[mqymlfm]

Приятно видеть, какие инструменты реально помогают в повседневной разработке

[elvirareido]

Спасибо за понятные и наглядные примеры тестов с разными подходами!

[IliaKovalciuk]

Отличное введение в мир Unit-тестов! Понравилась структура урока

[xlqyblc]

Теперь более уверенно применю эти знания в своих проектах. Давайте еще)

[Pavel]

Насчет производительности Playwright – у них есть платный тариф (Cloud что ли), который позволяет гонять тесты очень быстро (это на тот случай если их стало огромное количество и они стали прогоняться час). Ну и, наверное, свой раннер можно развернуть.

[ojrhuci]

Примеры из реального опыта добавляют весомости вашим словам, спасибо

[yvqzndv]

Спасибо, что поделились своим опытом, Георгий, было полезно

[aizadaabdieva]

Супер! на эту тему сложно найти норм материал

[tot_ra]

Довольно долго хоть и круто, я бы советовал разрезать на части - playwright и компонентное тестирование уже кажется не совсем под юнит-тесты подходит, хотя это конечно зависит от определения что такое юнит.

[Pavel]

Как и прежде юнит тесты в UI бесполезны (впрочем и не только во фронтенде). От E2E действительно есть толк. Но в больших компаниях ими может заниматься отдельный специалист.

[pwoqflh]

Спасибо за понятные и наглядные примеры тестов с разными подходами!

[Roman_Ivanov]

Теперь более уверенно применю эти знания в своих проектах. Давайте еще)

[aizadaabdieva]

Супер! на эту тему сложно найти норм материал