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

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

[@lvan_lvanov]

Для тех кто будет это делать во второй половине 23 года - зайдите на репозиторий Тимура и перед началом установите все в точности такие же зависимости и девЗависимости, и всё будет чётко Главное не путайтесь с импортами, объявлением переменных, функций, потому что если делать как на видео, и не использовать ТС, то будут ошибки какие-нибудь из-за невнимательности и так далее Всем удачи, видео очень полезное, но для его освоения нужен не один день!

[@skysar]

Вот это просто бомба! Тестирование - это самая обделённая вниманием тема на ютубе, по моему мнению. Спасибо, Тимур!

[@aleksandrzelenskiy4000]

Тестирование это то чего так не хватало! Спасибо Тимур! JEST, e2e, React Testing Library! Огонь!

[@user-yk4ie1ks4v]

Просто шикарно - в интернете крайне сложно найти хорошую информацию про тестирование, а тут все структурировано в одном видео. Большое спасибо!

[@sashap1rus562]

Наконец, как же я долго ждал этого курса от тебя, поможем Тимуру поднять видос в топ!!!

[@dmitrykarpovich186]

То чего очень не хватало) Спасибо большое, буду изучать на днях!

[@user-zk3bc1lf8k]

Спасибоооо за такой полный курс!!! Сейчас же буду смотреть! Уверена будет много полезного🥰

[@varanakonda]

давайте лайкнем и прокомментируем этот видос чтобы в мире стало больше чистого кода покрытого тестами

[@user-ht5qv3wy4z]

Ой браток, как же вовремя видос за тесты, как раз собирался их изучать, а здесь 2 часа практики, делаешь годноту, респект тебе! :)

[@kamenskiy7703]

Тимур, огромное спасибо за твой труд и старания Просто знай, что мы ценим это)

[@disconnect355]

Очень нужно разобраться в написании тестов. Автор молодец, автору спасибо)

[@user-bl4te2kg8v]

А что тут сказать? Все ОЧЕНЬ здорово!!! Впрочем как всегда. Огромнейшее СПАСИБО. Здоровья и благополучия!!!

[@antonskrebetz4935]

Ульби, отличный канал, без преувеличения. Поставил колокольчик пару месяцев назад, как нашел твой канал. Все видео крайне полезны, без лишней воды, с хорошими практическими примерами. Еще не посмотрел тесты, но даже не сомневаюсь в полезности материала! Продолжай в том же духе! Всем знакомым рекомендую твой канал. Это наверно мой первый комментарий на KZbin ;)

[@user-jz6tu5lh8r]

Ставлю лайк не глядя, потому что точно как всегда все на высоте будет, даже не сомневаюсь) потом посмотрю, давно ждал ролик об этом от тебя)

[@Evgeny..]

Js, JavaScript, test, тестирование. Тимур! Спасибо тебе огромное, ты лучший. Всех благ тебе!

[@sidless3862]

Ulbi, ты как будто мои мысли прочитал! В настоящее время начал изучать тему тестов, и даже планирую их писать в своем приложении. И тут твое видео, после которого я точно уверен, что буду разбираться в теме. Ты просто подарок судьбы для начинающих!

[@demiurgen13]

Лайк не глядя! Спасибо. Уверен, это будет самая полезная выжимка по юнит-тестированию, е2е тестам, jest и react testing library

[@kostyakykyshkin7974]

Огромное спасибо! Только собирался тестировать проект, и тут бац, вся нужная инфа в одном в видео)

[@danevgen]

Сильно ждал тесты. СПАСИБО огромное!

[@HaveFun77777]

КРУТО! Спасибо, давно ждал от тебя видео по тестам!

[@helenit4365]

Вот это ДА! Спасибо, Тима! Смотрим!💥

[@meowmyacivh]

Тимур, спасибо за проделанную работу и качественную подачу материала!

[@ipa_stor]

вот это неожиданно! надо будет крайне внимательно смотреть!👀 спасибо огромное

[@user-qx6gp9ci5d]

Отлично, как раз нужен был курс по тестам, вечером посмотрю обязательно)

[@yuryitikhonoff9631]

Да это просто огонь! Респект за системную инфу. Эй, Ютуб. Давай в топ советам всем кодерам!

[@PC-mv5jj]

Очень полезный практический урок, все по сути и без лишней лирики. Спасибо тебе, что щедро делишься своими знаниями и мастерством! 🔥👍

[@adelinaromanova8353]

То что нужно !!!! Как раз изучаем это!!! Спасибо, помог!

[@matfeyivandaev5024]

Как всегда, огромное спаcибо за вводный курс по тестированию JavaScript (JS) с использованием технологий Jest, React Testing Library! Отдельная благодарность за скриншотные тесты!

[@user-tl4xv1sy3y]

Ulbi лучший, не даром твои уроки на первых местах находятся по определённым темам, спасибо что освещаешь темы довольно полно и доступно, продолжай в том же духе!

[@demetrx7972]

Коммент в поддержку автора. Очень нравится твоя подача, точность, балансирование между необходимым уровнем теории и практикой. Желаю всего лучшего 🔥

[@daddy7847]

Только задался вопросом и начал искать про это инфу, это видео просто подарок!

[@user-yk6iq5hn4d]

Спасибо большое за материалы, сам недавно начал задумываться о тестах

[@egolege]

Огромная благодарность! Отличный материал!

[@whoisyourdaddybaby]

Тимур! Хочу поблагодарить вас за топовый контент! Очень полезная информация сосредоточена в одном видео, да собственно как и в каждом вашем видео и без воды. Желаю вам успехов во всех начинаниях! JavaScript, JEST, e2e, React Testing Library.

[@user-tr8xi3ik3c]

Важная тема. Большое спасибо за материал!

[@user-tx9cz5jn1j]

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

[@ne4to777]

Ничего, начнешь программировать, сразу тесты заставят писать)

[@jestemzbiaorusi8379]

@@ne4to777 ой не факт, часто встречаются репы без тестов, особенно фронтовые

[@user-md7px6he6c]

@@ne4to777 Никто не заставит, я бы сказал начнешь прОграммировать - потеряешься в бесконечных митингах через 10 лет, где и по прОграммировать тебе не дадут, это реальнее )

[@user-do8kg9fj1u]

я пришел к тестам так: нагрузка не равномерная на проекте и пока нет задач что бы от меня все отстали, я сказал я пишу тесты)

[@MrVolkodaff]

Вот это просто замечательно, в одном месте, все тезисно, без соплей. Как обычно в принципе у этого человека =) Вообще, чел, большой респект тебе, ты реально помогаешь учиться.

[@nikpan3421]

Годнота - подъехала😃 Огромное спасибо за Ваш бесценный труд!!

[@Vladislav0Art]

Ролик очень качественный! Всегда хотел ознакомиться с темой тестирования. Спасибо за контент, у тебя много крутых и полезных видео

[@igorovdienko58]

Агонь!🔥🔥🔥 Спасибо за полезную информацию!

[@serdargurbanmyradow287]

Спасибо тебе большое! Очень долго ждал этого урока)

[@jimmycaldwell2012]

Это офигенно! Спасибо за проделанную работу

[@dmytromykhailenko3497]

Это однозначно зачет! Спасибо!

[@mzx6531]

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

[@philipryazankin1073]

Спасибо. Ролик как всегда супер. Материал, подача, скорость!

[@88noname88]

Красавчик! Спасибо за курс!

[@evshushkov]

Спасибо большое, как раз на работе надо начинать писать тесты)

[@g0ld3nsecr3t6]

Спасибо за огромный вклад в этот мир :)

[@olehmudriy9308]

Заочно жирный лайк! План на вечер! Спасибо!

[@yagamithink8663]

Хотелось бы увидеть такой же фундаментальный курс по регрессионному тестированию, так как анализ безопасности, нагрузки на приложение - это очень интересные темы. За этот ролик большое спасибо. Успехов тебе по жизни!

[@itpro952]

Очередной альманах, но в этот раз уже по тестированию, кто согласен что формат фундаментальных курсов от а до я топ ставьте лайк

[@user-sj4oy1el5y]

Этот парень был из тех кто просто делал годноту ууууу...

[@sergeysamius1128]

Спасибо за полезный контент! Тестирование js, react, unit, jest, react testing library, e2e js

[@nikel5345]

Канал очень хороший! Никак не доходят руки до тестирования, это хороший повод! Пожелание! было бы здорово в таком же формате разобрать ci/cd Спасибо огромное за ваши труды !!!

[@Es_nova]

Мужик, как же ты вовремя, на работе как раз решили покрывать тестами проект и тут твое видео

[@Good_nick_name]

так иди на завод, стой да гайти чисти, и все окей) чем на заводе то плохо?

[@user-lg4yc9xi9h]

@@Good_nick_name иди сам толчки драй, я программист, я буду говнокодить, меня все устраивает

[@user-ku3bx8we1c]

Спасибо! Великолепный материал, с очень серьезной проработкой. Поставил лайк 👍

[@xenia6638]

Очень своевременно. Как раз разбираюсь с этой темой

[@karinabertosh5698]

как обычно все очень круто, понятно, без воды, спасибо!

[@user-fh2ds7yw7x]

Браво, как всегда контент наилучшего качества)

[@romuelson]

Мощь, сила, ярость! Невероятно качественное видео, лучший жи есть!

[@user-ej5up4bk8o]

Спасибо огромное за труд. Более подробного разбора я действительно нигде не видел.

[@barbatage5078]

Ух! 2 часаааа 🙏🏻 спасибо!

[@dmitrykabanov2869]

Пишу респект коммент)))

[@alik64]

Поехали !!! 🚀🚀🚀 Jest, React Testing Library, e2e, screenshot

[@user-en4cj3dn9p]

Как во время! Большое спасибо! Написал комент, потом пошел смотреть)))

[@bohdanartiukhov3572]

Ulbi спасибо тебе большое, твои видео это просто нечто, очень тебе благодарен, наконец-то что то годное появилось про тесты

[@PetyL]

Классный ролик. Уйма нужной информации. Спасибо!

[@met1388]

Круто!!! Ждал этот материал

[@onufrienko.a476]

Боже, храните Ulbi за такой классный контент!!!

[@Science790]

Тимур, ты топ! Спасибо за курсы и старания. Разжевываешь все за нас)

[@alexbigar9769]

Круть! Спасибо за годный контент!!! 🚀🚀🚀

[@NZXTUA]

Благодарность! Очень нужный топик, надеюсь будет полезен. Да, до тестирования всё никак не доходят руки.

[@tinalee8686]

Спасибо! Посмотрела до конца. Пойду изучать подробно каждую из них

[@parnasmi]

Спасибо за столько полезный контент. Один из лучших уроков по тестирование!

[@user-wr9ix4uq8f]

Большое спасибо за видео! Как раз по работе нужны))

[@user-tm7ct2zn9p]

как всегда понятно и доходчиво, спасибо)

[@Seacrest.]

Новые вкусняхи от Тимура

[@tevi6667]

ты четкий, рад что нашел твой ютуб канал.

[@user-rx1dg3tk8c]

Благодаря Тимуру многому научился. Перед тем как сделать Cloud Disk самостоятельно и окончательно разобраться во всем, прошел другие необходимые курсы на этом замечательном канале. И вот финишная прямая - Деплой, и что товарищи я получаю от Heroku при регистрации - следующий ответ: We do not accept sign-ups from your country. Все знают с чем это связано на сегодняшнюю дату. Такова жизнь, блин...

[@xqz666]

Ты и Михаил непомнящий лучшие

[@andrewsam224]

Согласен!!!!!

[@krollsiphone]

Не знаком с автором, но… огромное спасибо. Просто молодец и все.

[@aboronilov]

О да. Как же я долго этого ждал!!!

[@vp9878]

Спасибо! Лучший как всегда

[@romanivanov8931]

У тебя самый годный контент по разработке. Спасибо!

[@user-mt7nw7qp7o]

Спасибо огромное, все доступно и понятно!

[@user-nl9dk4tg8e]

Недавно искал ролик на канале по тестированию. И вот он.

[@sergsergey4251]

Огонь, топ контент - в топ поиска)))

[@AZErste]

Господи, автор просто читает мысли, в кои то веки нехотя решил наконец тестами заняться, а тут контент) лол с тайпскриптом и редаксом так же было)

[@katerinavakulskaya7419]

Спасибо за вашу работу) Всегда четко и полезно!

[@user-dy9zo3oq6k]

Спасибо за труд! Очень годный материал;)

[@mykolavarvarchuk937]

Супер, спасибо!👍

[@graves3799]

Конкретно сегодня решил закрыть все пробелы по этой теме. И тут на. Ну спасибо, бро 👍

[@ylsv]

очень полезная информация про тестирование, давно хотел разобраться, как оно работает, а тут как раз подробное описание, спасибо

[@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]

Этот вариант работает. Могу добавить, что по привычке при добавление axios воспользовался авто import, в итоге чесал репу и думал, что не так. А надо именно добавлять через require('axios'). Это же описано на npmjs.

[@IanNerovny]

@@doudou1929 вобще-то разницы нет и с require тоже не робит, я протестил

[@IanNerovny]

Офигенное спасибо! В вебпаке по идее такое-же правило будет, как я понимаю? (Если без cra приложение ставить)

[@user-xb8kj8vs3g]

Также долго мучался с этим. Искал разные решения из интернета и ничего не помогало. В итоге переделал на fetch. А сейчас попробовал ваше решение и axios заработал. Уряяя!

[@user-er2mq4kk1x]

Храни тебя Господь за это решение

[@forellko8600]

Идеально. Это то что мне сейчас нужно!

[@mmrtouristmlbb]

Ну ты просто лучший) обожаю твои видео, они реально насыщенные

[@arturhimself]

Спасибо, родной дорогой, только вот собрался инфу собирать

[@mclotos]

мы ждали и дождались! наконец-то! =)))

[@alexeyilin1527]

Очень вовремя, спасибо)

[@rostyslav5334]

То что надо, спасибо большое!