Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot)
Вставка
- Опубліковано 20 тра 2024
- В этом ролике мы научимся тестировать JS приложения. Ознакомимся с JEST и научимся писать UNIT тесты. С помощью React testing library и jest научимся писать интеграционные тесты на react приложения в связке с react router dom и redux. Используя WebdriverIO научимся писать e2e тесты в реакт приложении. Также с помощью storybook и loki js научимся делать регрессионное тестирование UI части приложения.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
Весь исходный код из ролика здесь - t.me/ulbi_tv/64
Таймкоды:
00:00 ➝ Введение. Теория. Пирамида тестирования. Квадрат допустимых значений
12:00 ➝ Практика. unit тесты с JEST
27:40 ➝ Юнит тестирование асинхронных функций. Мокаем данные. Snapshots
37:00 ➝ Тестирование React приложений. React Testing library
42:50 ➝ findBy, getBy, queryBy. Пример с useEffect. Асинхронный код
49:00 ➝ Тестирование событий. onClick, onChange, onInput. FireEvent, userEvent
54:40 ➝ Тестирование компонента с асинхронной загрузкой данных с сервера
58:40 ➝ Интеграционное тестирование в связке с react router dom v6
01:07:20 ➝ Хелпер для удобного тестирования роутинга
01:12:10 ➝ Интеграционное тестирование в связке с Redux toolkit
01:16:00 ➝ Тестируем селектор
01:22:00 ➝ Хелпер для удобного тестирования компонентов, в которых используется Redux
01:25:00 ➝ e2e тесты с WebdriverIO
01:33:00 ➝ PageObject паттерн
01:38:15 ➝ Пример е2е теста с асинхронным кодом
01:44:45 ➝ Скриншотные тесты storybook и loki js
01:53:00 ➝ Ставим лайки и пишем комменты, всем спасибо)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 - Наука та технологія
давайте лайкнем и прокомментируем этот видос чтобы в мире стало больше чистого кода покрытого тестами
Очень полезный контент! Спасибо автору за систематизированную подачу контента и за полноценный обзор современных решений для тестирования!
Товарищи, если кто смотрит в 2023. Loki давно не обновлялся и сейчас не работает с последней 7 версией Storybook. Я перепробовал разныe инструменты для регрессивного тестирования UI (reg-viz suite, visviz, lost pixel). В итоге остановился на Chromatic - это родной инструмент от Storybook. Легко настраивается и отлично интегрируется с GitHub actions, и storycap даже не нужен. К тому же есть бесплатный план, если не пользуешься профессионально. Рекомендую всем.
Боже, храните Ulbi за такой классный контент!!!
Как во время! Большое спасибо! Написал комент, потом пошел смотреть)))
Благодаря Тимуру многому научился. Перед тем как сделать Cloud Disk самостоятельно и окончательно разобраться во всем, прошел другие необходимые курсы на этом замечательном канале. И вот финишная прямая - Деплой, и что товарищи я получаю от Heroku при регистрации - следующий ответ: We do not accept sign-ups from your country.
Все знают с чем это связано на сегодняшнюю дату. Такова жизнь, блин...
У кого проблема "Cannot use import statement outside a module" при запуске теста на 58 минуте, то попробуйте в package.json добавить
"jest": {
"transformIgnorePatterns": ["node_modules/(?!axios)/"]
}
Поехали !!! 🚀🚀🚀 Jest, React Testing Library, e2e, screenshot
ты четкий, рад что нашел твой ютуб канал.
Js, JavaScript, test, тестирование. Тимур! Спасибо тебе огромное, ты лучший. Всех благ тебе!
2 часа годного контента
Да это просто огонь! Респект за системную инфу. Эй, Ютуб. Давай в топ советам всем кодерам!
Новые вкусняхи от Тимура
Сначала лайк и комментарии!
Конкретно сегодня решил закрыть все пробелы по этой теме. И тут на. Ну спасибо, бро 👍
Для тех кто будет это делать во второй половине 23 года - зайдите на репозиторий Тимура и перед началом установите все в точности такие же зависимости и девЗависимости, и всё будет чётко
Главное не путайтесь с импортами, объявлением переменных, функций, потому что если делать как на видео, и не использовать ТС, то будут ошибки какие-нибудь из-за невнимательности и так далее
Всем удачи, видео очень полезное, но для его освоения нужен не один день!
Очередной альманах, но в этот раз уже по тестированию, кто согласен что формат фундаментальных курсов от а до я топ ставьте лайк
Вчера на собесе про тесты спрашивали, Тимур как всегда вовремя)
Ты и Михаил непомнящий лучшие
Согласен!!!!!
Огонь, топ контент - в топ поиска)))
Недавно искал ролик на канале по тестированию. И вот он.
Ставлю лайк не глядя, потому что точно как всегда все на высоте будет, даже не сомневаюсь) потом посмотрю, давно ждал ролик об этом от тебя)
Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot) Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot) react redux react router dom v6 jest webdriver e2e storybook tests js
Господи, автор просто читает мысли, в кои то веки нехотя решил наконец тестами заняться, а тут контент) лол с тайпскриптом и редаксом так же было)
Пишу респект коммент)))
Лайк поставил, ночью посмотрю
Коммент в поддержку продвижения
Тесты - тема, до которой так и не доходят руки. Думаю что вот именной сейчас настает время изучить эту тему с помощью видео замечательного от замечательного автора)
Ничего, начнешь программировать, сразу тесты заставят писать)
@@ne4to777 ой не факт, часто встречаются репы без тестов, особенно фронтовые
@@ne4to777 Никто не заставит, я бы сказал начнешь прОграммировать - потеряешься в бесконечных митингах через 10 лет, где и по прОграммировать тебе не дадут, это реальнее )
я пришел к тестам так: нагрузка не равномерная на проекте и пока нет задач что бы от меня все отстали, я сказал я пишу тесты)
В этом ролике мы научимся тестировать JS приложения. Ознакомимся с JEST и научимся писать UNIT тесты. С помощью React testing library и jest научимся писать интеграционные тесты на react приложения в связке с react router dom и redux. Используя WebdriverIO научимся писать e2e тесты в реакт приложении. Также с помощью storybook и loki js научимся делать регрессионное тестирование UI части приложения
.------
Для продвижения
То что нужно !!!! Как раз изучаем это!!! Спасибо, помог!
Коммент для продвижения на ютюбе
Только задался вопросом и начал искать про это инфу, это видео просто подарок!
Просто шикарно - в интернете крайне сложно найти хорошую информацию про тестирование, а тут все структурировано в одном видео. Большое спасибо!
Коммент в поддержку автора. Очень нравится твоя подача, точность, балансирование между необходимым уровнем теории и практикой. Желаю всего лучшего 🔥
Вот это просто бомба! Тестирование - это самая обделённая вниманием тема на ютубе, по моему мнению. Спасибо, Тимур!
Сильно ждал тесты. СПАСИБО огромное!
Тимур, огромное спасибо за твой труд и старания
Просто знай, что мы ценим это)
Наконец, как же я долго ждал этого курса от тебя, поможем Тимуру поднять видос в топ!!!
Мужик, как же ты вовремя, на работе как раз решили покрывать тестами проект и тут твое видео
так иди на завод, стой да гайти чисти, и все окей) чем на заводе то плохо?
@@Good_nick_name иди сам толчки драй, я программист, я буду говнокодить, меня все устраивает
лайк глядя на половину
По описанию видео, то что мне надо )
Вот это ДА! Спасибо, Тима! Смотрим!💥
КРУТО! Спасибо, давно ждал от тебя видео по тестам!
То чего очень не хватало) Спасибо большое, буду изучать на днях!
Ulbi TV
вот это неожиданно! надо будет крайне внимательно смотреть!👀 спасибо огромное
Великолепный работа
Тимур самый лучшый сэнсэй
огромный спасибо 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Ой браток, как же вовремя видос за тесты, как раз собирался их изучать, а здесь 2 часа практики, делаешь годноту, респект тебе! :)
Тестирование это то чего так не хватало! Спасибо Тимур! JEST, e2e, React Testing Library! Огонь!
Этот парень был из тех кто просто делал годноту ууууу...
А что тут сказать? Все ОЧЕНЬ здорово!!! Впрочем как всегда. Огромнейшее СПАСИБО. Здоровья и благополучия!!!
Очень нужно разобраться в написании тестов. Автор молодец, автору спасибо)
Важная тема. Большое спасибо за материал!
Не знаком с автором, но… огромное спасибо. Просто молодец и все.
Агонь!🔥🔥🔥 Спасибо за полезную информацию!
Спасибо большое за материалы, сам недавно начал задумываться о тестах
Как всегда, огромное спаcибо за вводный курс по тестированию JavaScript (JS) с использованием технологий Jest, React Testing Library! Отдельная благодарность за скриншотные тесты!
Ульби, отличный канал, без преувеличения. Поставил колокольчик пару месяцев назад, как нашел твой канал. Все видео крайне полезны, без лишней воды, с хорошими практическими примерами. Еще не посмотрел тесты, но даже не сомневаюсь в полезности материала! Продолжай в том же духе! Всем знакомым рекомендую твой канал.
Это наверно мой первый комментарий на UA-cam ;)
Коммент для продвижения, спасибо за твой труд
Спасибо, родной дорогой, только вот собрался инфу собирать
Народ, всем ( Тимурке отдельный ), как же ты круто угадал тему для видоса, как вариант для будущих видео - Recoil (думаю скоро будет актуально)
Тимур, спасибо за проделанную работу и качественную подачу материала!
Огромная благодарность! Отличный материал!
Ролик очень качественный! Всегда хотел ознакомиться с темой тестирования. Спасибо за контент, у тебя много крутых и полезных видео
Спасибоооо за такой полный курс!!! Сейчас же буду смотреть! Уверена будет много полезного🥰
Это однозначно зачет! Спасибо!
Огромное спасибо! Только собирался тестировать проект, и тут бац, вся нужная инфа в одном в видео)
Отлично, как раз нужен был курс по тестам, вечером посмотрю обязательно)
Спасибо тебе большое! Очень долго ждал этого урока)
Ulbi, ты как будто мои мысли прочитал! В настоящее время начал изучать тему тестов, и даже планирую их писать в своем приложении. И тут твое видео, после которого я точно уверен, что буду разбираться в теме. Ты просто подарок судьбы для начинающих!
Все хотел изучить через время тестировку на жс и тут такой подгон, та ты шо, в который раз рад что есть такой канал на ютубе, спасибо тебе
Тимур! Хочу поблагодарить вас за топовый контент! Очень полезная информация сосредоточена в одном видео, да собственно как и в каждом вашем видео и без воды. Желаю вам успехов во всех начинаниях! JavaScript, JEST, e2e, React Testing Library.
Спасибо за полезный контент! Тестирование js, react, unit, jest, react testing library, e2e js
Очень полезный практический урок, все по сути и без лишней лирики. Спасибо тебе, что щедро делишься своими знаниями и мастерством! 🔥👍
Заочно жирный лайк! План на вечер! Спасибо!
Это офигенно! Спасибо за проделанную работу
Красавчик! Спасибо за курс!
Вот это просто замечательно, в одном месте, все тезисно, без соплей. Как обычно в принципе у этого человека =) Вообще, чел, большой респект тебе, ты реально помогаешь учиться.
Спасибо, потом позже буду смотреть
Благодаря вашим видео у меня уже 'КОТ Барсик' во всю на javascript пишет код! На столько все разжевано!
Ulbi спасибо тебе большое, твои видео это просто нечто, очень тебе благодарен, наконец-то что то годное появилось про тесты
Спасибо. Ролик как всегда супер. Материал, подача, скорость!
Лайк авансом. Потом обязательно посмотрю
Мощь, сила, ярость! Невероятно качественное видео, лучший жи есть!
Для тех кто столкнулся с ошибкой `Failed to render with error "unable to click element as it has or inherits pointer-events set to "none".` на этапе с loki, то вот решение.
Long story: На момент записи урока этих проблем не было. Сейчас при инициализации storybook в пресете идет пример с play для кейса. На сколько понял это новый функционал и локи пока под него не адаптировали. По дефолту, локи добавляет разные стили и отключает анимации для того, чтобы вёрстка получалась максимально статичной, чтобы на скриншотах не было расхождений. Таким же образом он накидывает отключение событий курсора, на что начинает ругаться testing-library, потому что не может нажать на кнопку.
Resume: В issues на официальном гитхабе локи нашел решение - функция написанная на typescript (github.com/oblador/loki/issues/359#issuecomment-1248135073). По уроку мы пишем на js, но решение проблемы на typescript, так что придется удалить описания типов, чтобы оно заработало. Также надеемся что рано или поздно у локи появится нативная поддержка play.
Лайк не глядя! Спасибо. Уверен, это будет самая полезная выжимка по юнит-тестированию, е2е тестам, jest и react testing library
Годнота - подъехала😃 Огромное спасибо за Ваш бесценный труд!!
Классный ролик. Уйма нужной информации. Спасибо!
мы ждали и дождались! наконец-то! =)))
афигеннннннный ты!
Спасибо! Великолепный материал, с очень серьезной проработкой. Поставил лайк 👍
О да. Как же я долго этого ждал!!!
Только вперёд!!!
Круто!!! Ждал этот материал
как обычно все очень круто, понятно, без воды, спасибо!
Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot)
Не останавливайся)
не смотрел, но одобряю!
Ulbi лучший, не даром твои уроки на первых местах находятся по определённым темам, спасибо что освещаешь темы довольно полно и доступно, продолжай в том же духе!
топ контент подъехал)