Тёмный

Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot) 

Ulbi TV
Подписаться 298 тыс.
Просмотров 240 тыс.
50% 1

В этом ролике мы научимся тестировать 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

Наука

Опубликовано:

 

20 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 651   
@varanakonda
@varanakonda 2 года назад
давайте лайкнем и прокомментируем этот видос чтобы в мире стало больше чистого кода покрытого тестами
@user-rx1dg3tk8c
@user-rx1dg3tk8c 2 года назад
Благодаря Тимуру многому научился. Перед тем как сделать Cloud Disk самостоятельно и окончательно разобраться во всем, прошел другие необходимые курсы на этом замечательном канале. И вот финишная прямая - Деплой, и что товарищи я получаю от Heroku при регистрации - следующий ответ: We do not accept sign-ups from your country. Все знают с чем это связано на сегодняшнюю дату. Такова жизнь, блин...
@user-tx9cz5jn1j
@user-tx9cz5jn1j 2 года назад
Тесты - тема, до которой так и не доходят руки. Думаю что вот именной сейчас настает время изучить эту тему с помощью видео замечательного от замечательного автора)
@ne4to777
@ne4to777 Год назад
Ничего, начнешь программировать, сразу тесты заставят писать)
@jestemzbiaorusi8379
@jestemzbiaorusi8379 Год назад
@@ne4to777 ой не факт, часто встречаются репы без тестов, особенно фронтовые
@user-md7px6he6c
@user-md7px6he6c 10 месяцев назад
@@ne4to777 Никто не заставит, я бы сказал начнешь прОграммировать - потеряешься в бесконечных митингах через 10 лет, где и по прОграммировать тебе не дадут, это реальнее )
@user-do8kg9fj1u
@user-do8kg9fj1u 3 месяца назад
я пришел к тестам так: нагрузка не равномерная на проекте и пока нет задач что бы от меня все отстали, я сказал я пишу тесты)
@user-yk4ie1ks4v
@user-yk4ie1ks4v 2 года назад
Просто шикарно - в интернете крайне сложно найти хорошую информацию про тестирование, а тут все структурировано в одном видео. Большое спасибо!
@Evgeny..
@Evgeny.. 2 года назад
В этом ролике мы научимся тестировать JS приложения. Ознакомимся с JEST и научимся писать UNIT тесты. С помощью React testing library и jest научимся писать интеграционные тесты на react приложения в связке с react router dom и redux. Используя WebdriverIO научимся писать e2e тесты в реакт приложении. Также с помощью storybook и loki js научимся делать регрессионное тестирование UI части приложения .------ Для продвижения
@Evgeny..
@Evgeny.. 2 года назад
Js, JavaScript, test, тестирование. Тимур! Спасибо тебе огромное, ты лучший. Всех благ тебе!
@antonskrebetz4935
@antonskrebetz4935 2 года назад
Ульби, отличный канал, без преувеличения. Поставил колокольчик пару месяцев назад, как нашел твой канал. Все видео крайне полезны, без лишней воды, с хорошими практическими примерами. Еще не посмотрел тесты, но даже не сомневаюсь в полезности материала! Продолжай в том же духе! Всем знакомым рекомендую твой канал. Это наверно мой первый комментарий на RU-vid ;)
@mayke8623
@mayke8623 2 года назад
Благодаря вашим видео у меня уже 'КОТ Барсик' во всю на javascript пишет код! На столько все разжевано!
@sidless3862
@sidless3862 2 года назад
Ulbi, ты как будто мои мысли прочитал! В настоящее время начал изучать тему тестов, и даже планирую их писать в своем приложении. И тут твое видео, после которого я точно уверен, что буду разбираться в теме. Ты просто подарок судьбы для начинающих!
@frylo0
@frylo0 Год назад
Если у кого-то возникла проблема "cannot use import statement outside a module" на axios, то вот решение. Long story: После выхода данного урока, библиотека axios перешла с CommonJS импорта на ES Modules, из-за этого и возникает ошибка. Ошибка именно в библиотеке. Чтобы это исправить, надо рассказать Jest'у что библиотека использует модули и это надо учесть при трансформации кода при запуске теста. Resume: Надо добавить в package.json код. Cам package.json будет выглядеть так: { ... "jest": { "transformIgnorePatterns": ["node_modules/(?!axios)"] } ... }
@doudou1929
@doudou1929 Год назад
Этот вариант работает. Могу добавить, что по привычке при добавление axios воспользовался авто import, в итоге чесал репу и думал, что не так. А надо именно добавлять через require('axios'). Это же описано на npmjs.
@IanNerovny
@IanNerovny Год назад
@@doudou1929 вобще-то разницы нет и с require тоже не робит, я протестил
@IanNerovny
@IanNerovny Год назад
Офигенное спасибо! В вебпаке по идее такое-же правило будет, как я понимаю? (Если без cra приложение ставить)
@user-xb8kj8vs3g
@user-xb8kj8vs3g Год назад
Также долго мучался с этим. Искал разные решения из интернета и ничего не помогало. В итоге переделал на fetch. А сейчас попробовал ваше решение и axios заработал. Уряяя!
@user-er2mq4kk1x
@user-er2mq4kk1x Год назад
Храни тебя Господь за это решение
@adelinaromanova8353
@adelinaromanova8353 2 года назад
То что нужно !!!! Как раз изучаем это!!! Спасибо, помог!
@user-bl4te2kg8v
@user-bl4te2kg8v 2 года назад
А что тут сказать? Все ОЧЕНЬ здорово!!! Впрочем как всегда. Огромнейшее СПАСИБО. Здоровья и благополучия!!!
@user-jz6tu5lh8r
@user-jz6tu5lh8r 2 года назад
Ставлю лайк не глядя, потому что точно как всегда все на высоте будет, даже не сомневаюсь) потом посмотрю, давно ждал ролик об этом от тебя)
@matfeyivandaev5024
@matfeyivandaev5024 2 года назад
Как всегда, огромное спаcибо за вводный курс по тестированию JavaScript (JS) с использованием технологий Jest, React Testing Library! Отдельная благодарность за скриншотные тесты!
@disconnect355
@disconnect355 2 года назад
Очень нужно разобраться в написании тестов. Автор молодец, автору спасибо)
@user-ht5qv3wy4z
@user-ht5qv3wy4z 2 года назад
Ой браток, как же вовремя видос за тесты, как раз собирался их изучать, а здесь 2 часа практики, делаешь годноту, респект тебе! :)
@arturhimself
@arturhimself 2 года назад
Спасибо, родной дорогой, только вот собрался инфу собирать
@skysar
@skysar 2 года назад
Вот это просто бомба! Тестирование - это самая обделённая вниманием тема на ютубе, по моему мнению. Спасибо, Тимур!
@dmitrykarpovich186
@dmitrykarpovich186 2 года назад
То чего очень не хватало) Спасибо большое, буду изучать на днях!
@HaveFun77777
@HaveFun77777 2 года назад
КРУТО! Спасибо, давно ждал от тебя видео по тестам!
@user-nl9dk4tg8e
@user-nl9dk4tg8e 2 года назад
Недавно искал ролик на канале по тестированию. И вот он.
@aleksandrzelenskiy4000
@aleksandrzelenskiy4000 2 года назад
Тестирование это то чего так не хватало! Спасибо Тимур! JEST, e2e, React Testing Library! Огонь!
@graves3799
@graves3799 2 года назад
Конкретно сегодня решил закрыть все пробелы по этой теме. И тут на. Ну спасибо, бро 👍
@kolyabokov88
@kolyabokov88 2 года назад
НУ, вот опять же в тему) я сейчас на новой работе как раз сижу за докой Cypress, впервые столкнулся с тестированием) спасибо бро, обязательно к просмотру!
@DeIgado95
@DeIgado95 2 года назад
какие люди)
@kolyabokov88
@kolyabokov88 2 года назад
@@DeIgado95 😘🙏
@PC-mv5jj
@PC-mv5jj Год назад
Очень полезный практический урок, все по сути и без лишней лирики. Спасибо тебе, что щедро делишься своими знаниями и мастерством! 🔥👍
@adam-front
@adam-front 2 года назад
Лайк поставил, ночью посмотрю
@eraliev_kanimet
@eraliev_kanimet 2 года назад
Спасибо, потом позже буду смотреть
@falsetrue7910
@falsetrue7910 2 года назад
Посмотрел 30 минут и уже вижу, что годнота, досмотрю и дам полный фидбэк, спасибо! Тестирование js, react, unit, jest, react testing library, e2e js
@user-uq5tf7id7y
@user-uq5tf7id7y 2 года назад
после 30 той минуты уровень с вертолетиком
@itmodern2386
@itmodern2386 2 года назад
А этот чел всё ещё досматривает похоже)
@kostyakykyshkin7974
@kostyakykyshkin7974 2 года назад
Огромное спасибо! Только собирался тестировать проект, и тут бац, вся нужная инфа в одном в видео)
@whoisyourdaddybaby
@whoisyourdaddybaby 2 года назад
Тимур! Хочу поблагодарить вас за топовый контент! Очень полезная информация сосредоточена в одном видео, да собственно как и в каждом вашем видео и без воды. Желаю вам успехов во всех начинаниях! JavaScript, JEST, e2e, React Testing Library.
@Es_nova
@Es_nova 2 года назад
Мужик, как же ты вовремя, на работе как раз решили покрывать тестами проект и тут твое видео
@Good_nick_name
@Good_nick_name 2 года назад
так иди на завод, стой да гайти чисти, и все окей) чем на заводе то плохо?
@user-lg4yc9xi9h
@user-lg4yc9xi9h 2 года назад
@@Good_nick_name иди сам толчки драй, я программист, я буду говнокодить, меня все устраивает
@user-tl4xv1sy3y
@user-tl4xv1sy3y 2 года назад
Ulbi лучший, не даром твои уроки на первых местах находятся по определённым темам, спасибо что освещаешь темы довольно полно и доступно, продолжай в том же духе!
@sashap1rus562
@sashap1rus562 2 года назад
Наконец, как же я долго ждал этого курса от тебя, поможем Тимуру поднять видос в топ!!!
@user-yk6iq5hn4d
@user-yk6iq5hn4d 2 года назад
Спасибо большое за материалы, сам недавно начал задумываться о тестах
@danevgen
@danevgen 2 года назад
Сильно ждал тесты. СПАСИБО огромное!
@serkh139
@serkh139 29 дней назад
Отличный старт для дальнейшего самостоятельного изучения. Спасибо!
@demetrx7972
@demetrx7972 Год назад
Коммент в поддержку автора. Очень нравится твоя подача, точность, балансирование между необходимым уровнем теории и практикой. Желаю всего лучшего 🔥
@GyrWorker
@GyrWorker 2 года назад
По описанию видео, то что мне надо )
@yagamithink8663
@yagamithink8663 11 месяцев назад
Хотелось бы увидеть такой же фундаментальный курс по регрессионному тестированию, так как анализ безопасности, нагрузки на приложение - это очень интересные темы. За этот ролик большое спасибо. Успехов тебе по жизни!
@user-qx6gp9ci5d
@user-qx6gp9ci5d 2 года назад
Отлично, как раз нужен был курс по тестам, вечером посмотрю обязательно)
@user-zk3bc1lf8k
@user-zk3bc1lf8k 2 года назад
Спасибоооо за такой полный курс!!! Сейчас же буду смотреть! Уверена будет много полезного🥰
@yuridukhanin19
@yuridukhanin19 2 года назад
Спасибо, полезно. Лайк поставил
@ipa_stor
@ipa_stor 2 года назад
вот это неожиданно! надо будет крайне внимательно смотреть!👀 спасибо огромное
@kamenskiy7703
@kamenskiy7703 2 года назад
Тимур, огромное спасибо за твой труд и старания Просто знай, что мы ценим это)
@fruktela7772
@fruktela7772 2 года назад
Скажи, когда React Native? Или ты с этим не работаешь?
@user-vk5cu5vb3o
@user-vk5cu5vb3o 2 года назад
Лайк авансом. Потом обязательно посмотрю
@nikel5345
@nikel5345 2 года назад
Канал очень хороший! Никак не доходят руки до тестирования, это хороший повод! Пожелание! было бы здорово в таком же формате разобрать ci/cd Спасибо огромное за ваши труды !!!
@user-en4cj3dn9p
@user-en4cj3dn9p 2 года назад
Как во время! Большое спасибо! Написал комент, потом пошел смотреть)))
@tevi6667
@tevi6667 2 года назад
ты четкий, рад что нашел твой ютуб канал.
@user-tr8xi3ik3c
@user-tr8xi3ik3c 2 года назад
Важная тема. Большое спасибо за материал!
@onufrienko.a476
@onufrienko.a476 2 года назад
Боже, храните Ulbi за такой классный контент!!!
@AZErste
@AZErste 2 года назад
Господи, автор просто читает мысли, в кои то веки нехотя решил наконец тестами заняться, а тут контент) лол с тайпскриптом и редаксом так же было)
@indoorghoul5161
@indoorghoul5161 2 года назад
Коммент в поддержку продвижения
@xqz666
@xqz666 2 года назад
Ты и Михаил непомнящий лучшие
@andrewsam224
@andrewsam224 3 месяца назад
Согласен!!!!!
@KolomeetsAV
@KolomeetsAV Месяц назад
Очень полезный контент! Спасибо автору за систематизированную подачу контента и за полноценный обзор современных решений для тестирования!
@vadimpyatakov7021
@vadimpyatakov7021 2 года назад
лайк глядя на половину
@egolege
@egolege 2 года назад
Огромная благодарность! Отличный материал!
@alik64
@alik64 2 года назад
Поехали !!! 🚀🚀🚀 Jest, React Testing Library, e2e, screenshot
@user-rm5jx8pi4i
@user-rm5jx8pi4i 2 года назад
не смотрел, но одобряю!
@sergeysamius1128
@sergeysamius1128 2 года назад
Спасибо за полезный контент! Тестирование js, react, unit, jest, react testing library, e2e js
@NZXTUA
@NZXTUA 2 года назад
Благодарность! Очень нужный топик, надеюсь будет полезен. Да, до тестирования всё никак не доходят руки.
@helenit4365
@helenit4365 2 года назад
Вот это ДА! Спасибо, Тима! Смотрим!💥
@MrVolkodaff
@MrVolkodaff 2 года назад
Вот это просто замечательно, в одном месте, все тезисно, без соплей. Как обычно в принципе у этого человека =) Вообще, чел, большой респект тебе, ты реально помогаешь учиться.
@yuryitikhonoff9631
@yuryitikhonoff9631 2 года назад
Да это просто огонь! Респект за системную инфу. Эй, Ютуб. Давай в топ советам всем кодерам!
@meowmyacivh
@meowmyacivh 2 года назад
Тимур, спасибо за проделанную работу и качественную подачу материала!
@mzx6531
@mzx6531 2 года назад
Все хотел изучить через время тестировку на жс и тут такой подгон, та ты шо, в который раз рад что есть такой канал на ютубе, спасибо тебе
@igorovdienko58
@igorovdienko58 2 года назад
Агонь!🔥🔥🔥 Спасибо за полезную информацию!
@user-eq2to1gc4k
@user-eq2to1gc4k 2 года назад
Народ, всем ( Тимурке отдельный ), как же ты круто угадал тему для видоса, как вариант для будущих видео - Recoil (думаю скоро будет актуально)
@jaloliddinhazratqulov891
@jaloliddinhazratqulov891 2 года назад
Великолепный работа Тимур самый лучшый сэнсэй огромный спасибо 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
@daddy7847
@daddy7847 2 года назад
Только задался вопросом и начал искать про это инфу, это видео просто подарок!
@tinalee8686
@tinalee8686 2 года назад
Спасибо! Посмотрела до конца. Пойду изучать подробно каждую из них
@demiurgen13
@demiurgen13 2 года назад
Лайк не глядя! Спасибо. Уверен, это будет самая полезная выжимка по юнит-тестированию, е2е тестам, jest и react testing library
@Vladislav0Art
@Vladislav0Art 2 года назад
Ролик очень качественный! Всегда хотел ознакомиться с темой тестирования. Спасибо за контент, у тебя много крутых и полезных видео
@user-qe9vt5tg6s
@user-qe9vt5tg6s 2 года назад
Коммент в поддержку, спасибо!
@xenia6638
@xenia6638 2 года назад
Очень своевременно. Как раз разбираюсь с этой темой
@user-ue8bh7tj5k
@user-ue8bh7tj5k 2 года назад
Коммент для продвижения на ютюбе
@evshushkov
@evshushkov 2 года назад
Спасибо большое, как раз на работе надо начинать писать тесты)
@ijaggerstube
@ijaggerstube Год назад
Товарищи, если кто смотрит в 2023. Loki давно не обновлялся и сейчас не работает с последней 7 версией Storybook. Я перепробовал разныe инструменты для регрессивного тестирования UI (reg-viz suite, visviz, lost pixel). В итоге остановился на Chromatic - это родной инструмент от Storybook. Легко настраивается и отлично интегрируется с GitHub actions, и storycap даже не нужен. К тому же есть бесплатный план, если не пользуешься профессионально. Рекомендую всем.
@annj3150
@annj3150 2 года назад
Ура! Тестирование!))
@user-sj4oy1el5y
@user-sj4oy1el5y 2 года назад
Этот парень был из тех кто просто делал годноту ууууу...
@maximzvenigorodsky8563
@maximzvenigorodsky8563 2 года назад
Коммент для продвижения, спасибо за твой труд
@PetyL
@PetyL 2 года назад
Классный ролик. Уйма нужной информации. Спасибо!
@sergsergey4251
@sergsergey4251 2 года назад
Огонь, топ контент - в топ поиска)))
@Seacrest.
@Seacrest. 2 года назад
Новые вкусняхи от Тимура
@Evgeny..
@Evgeny.. 2 года назад
Сначала лайк и комментарии!
@serdargurbanmyradow287
@serdargurbanmyradow287 2 года назад
Спасибо тебе большое! Очень долго ждал этого урока)
@user-tc2wf6wy7m
@user-tc2wf6wy7m 6 месяцев назад
Памятник тебе поставить надо! Прилетела задача изучить тесты - поднял документацию, чета все прямо со скрипом шло. Дошел до твоего видоса, как боженька разложил! Спасибо тебе огромное! И так по любому видосу, с авторизацией тоже отельный респект!
@itpro952
@itpro952 2 года назад
Очередной альманах, но в этот раз уже по тестированию, кто согласен что формат фундаментальных курсов от а до я топ ставьте лайк
@brucewayne_007
@brucewayne_007 2 года назад
Вчера на собесе про тесты спрашивали, Тимур как всегда вовремя)
@user-ej5up4bk8o
@user-ej5up4bk8o Год назад
Спасибо огромное за труд. Более подробного разбора я действительно нигде не видел.
@met1388
@met1388 2 года назад
Круто!!! Ждал этот материал
@alexeyilin1527
@alexeyilin1527 2 года назад
Очень вовремя, спасибо)
@jsde_coder3234
@jsde_coder3234 2 года назад
Пушка, бомба, ракета, красава, бог, Спасибо !)
@olehmudriy9308
@olehmudriy9308 2 года назад
Заочно жирный лайк! План на вечер! Спасибо!
@deathgun5450
@deathgun5450 2 года назад
афигеннннннный ты!
@user-ku3bx8we1c
@user-ku3bx8we1c 2 года назад
Спасибо! Великолепный материал, с очень серьезной проработкой. Поставил лайк 👍
@user-rx1dg3tk8c
@user-rx1dg3tk8c 2 года назад
Очень интересно будет посмотреть!!!!!!!!!
@kostal1979
@kostal1979 Год назад
У кого проблема "Cannot use import statement outside a module" при запуске теста на 58 минуте, то попробуйте в package.json добавить "jest": { "transformIgnorePatterns": ["node_modules/(?!axios)/"] }
@jimmycaldwell2012
@jimmycaldwell2012 2 года назад
Это офигенно! Спасибо за проделанную работу
@ylsv
@ylsv Год назад
очень полезная информация про тестирование, давно хотел разобраться, как оно работает, а тут как раз подробное описание, спасибо
Далее
Самое хитрое животное.
00:57
Просмотров 282 тыс.
Big Bottle Candy Drink💦
00:12
Просмотров 624 тыс.
CI CD наглядные примеры
22:08
Просмотров 265 тыс.
Next.js with React Testing Library, Jest, TypeScript
25:04
Я бы сделал дешевле - Samsung Flip 4
1:00
Эволюция телефонов!
0:30
Просмотров 5 млн