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

🌸 МАЙ! До 14 мая PHP со скидкой от 80 000 до 130 000 рублей на Frontend: ru.hexlet.io/link/V8tM1T
🔥 Бесплатный курс «Основы JS»: ru.hexlet.io/link/4SlLQi
🔥 Научись писать Unit-тесты с помощью курса по автоматическому тестированию на JS: ru.hexlet.io/link/Av1lI7
🔥 Подготовительный курс для начинающих фронтендеров: ru.hexlet.io/link/SmUmMe
✅ Полезные вебинары по программированию каждую неделю: ru.hexlet.io/link/j1hCEv
Начнём с откровения: в Хекслете очень сильно топят за написание тестов) Поэтому в этом выпуске мы будем разбираться в Unit-тестировании, а в этом нам поможет Георгий Бузин, Frontend Team Lead в Junehomes:
- узнаем, зачем программистам писать Unit-тесты
- пройдёмся по инструментам тестирования - от простых к более сложным
- посмотрим, какие инструменты помогут в тестировании frontend
- напишем 6 тестов с помощью разных подходов и на практике поймём отличия
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями. Подписывайтесь на наш telegram-канал: t.me/hexlet_ru
____
🔗 Полезные ссылки:
- Знакомимся с понятием тестов и пишем первые простые тесты: • Тесты и автоматическое...
- Вебинар Кирилла Мочевина о написании тестов: • Начинаем писать тесты ...
- Комьюнити Хекслета: t.me/hexletcommunity
- Какие бывают этапы и виды тестирования: ru.hexlet.io/link/cR0G0R
- Чек-лист для разработчиков по тестированию приложений: ru.hexlet.io/link/aQzsVl
- Начинаем писать тесты (правильно): ru.hexlet.io/link/R6ekK2
- Другие вебинары для разработчиков: • Уроки и доклады для пр...
____
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 для каких целей подходит каждый инструмент тестирования

[@user-mq3ym8lf5m]

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

[@elvirareido]

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

[@Roman_Ivanov105]

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

[@IliaKovalciuk]

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

[@user-oj8rh3uc3i]

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

[@UmarSher-dv9fw]

Супер класс спасибо большое 👍👍👍

[@aizadaabdieva748]

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

[@user-yv9qz5nd9v]

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

[@tot_ra]

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

[@fnipershtain]

Это же самгенерал Зод!

[@user-pw3hd2qk1t]

💥💥💥💥

[@aizadaabdieva748]

❤❤❤❤🎉🎉🎉🎉

[@Pachiso]

me cambiaron de server

[@user-pw6oq7fl1h]

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

[@user-xl6qy7bl9c]

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

[@aizadaabdieva748]

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