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

🔥 Бесплатный курс «Основы 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 #хекслет

Пікірлер: 17

  • @HexletOrg
    @HexletOrg4 ай бұрын

    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 для каких целей подходит каждый инструмент тестирования

  • @elvirareido
    @elvirareido4 ай бұрын

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

  • @user-mq3ym8lf5m
    @user-mq3ym8lf5m4 ай бұрын

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

  • @Roman_Ivanov105
    @Roman_Ivanov1054 ай бұрын

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

  • @IliaKovalciuk
    @IliaKovalciuk4 ай бұрын

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

  • @aizadaabdieva748
    @aizadaabdieva7484 ай бұрын

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

  • @user-oj8rh3uc3i
    @user-oj8rh3uc3i4 ай бұрын

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

  • @user-yv9qz5nd9v
    @user-yv9qz5nd9v4 ай бұрын

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

  • @UmarSher-dv9fw
    @UmarSher-dv9fw4 ай бұрын

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

  • @tot_ra
    @tot_ra4 ай бұрын

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

  • @user-pw3hd2qk1t
    @user-pw3hd2qk1t4 ай бұрын

    💥💥💥💥

  • @aizadaabdieva748
    @aizadaabdieva7484 ай бұрын

    ❤❤❤❤🎉🎉🎉🎉

  • @fnipershtain
    @fnipershtain4 ай бұрын

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

  • @Pachiso
    @Pachiso4 ай бұрын

    me cambiaron de server

  • @user-pw6oq7fl1h
    @user-pw6oq7fl1h4 ай бұрын

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

  • @user-xl6qy7bl9c
    @user-xl6qy7bl9c4 ай бұрын

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

  • @aizadaabdieva748
    @aizadaabdieva7484 ай бұрын

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

Келесі