Тестирование React приложения 

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

Очень крутая дикция и манера подачи

07:00 запуск тестов 10:50 директивы test, it, describe 14:00 директивы expect, toBeInTheDocument 16:00 getByRole, queryByRole 19:20 snapshot 30:00 muck function 32:51 screen.debug() 34:40 placeholder for input 36:20 fireEvent, userEvent 38:00 userEvent.type() - check onChange function with help of jest.fn() mock function 39:40 библиотека classnames 46:50 test CSS classes 49:16 метод toHaveStyle - toHaveStyle работает в том случае, если ты передашь стили (display: flex) через атрибут style, иначе это просто стили с класса 51:00 tests and commit - options a and --watchAll 52:50 useEffect, динамическая проверка

Михаил, классно объясняете - спокойно, хорошо, понятно. Спасибо большое!!!!!

Михаил, это видео - именно то что было необходимо мне прямо сейчас. Посмотрю его как только будет свободное время. Огромное Вам спасибо!

Спасибо за видео урок! Примеры компонентов и как их тестировать были замечательные. Хочу пожелать дальнейшего развития тебе и твоему каналу!

Как же вовремя!) Спасибо огромное. Типа подписался несколько месяцев назад из-за одного видео, даже вспомнить не могу - какого, а тут просто то, что нужно в отличном виде. Вот так удача))) Очень большое спасибо!

ОГРОМНОЕ СПАСИБО!! Преподавание ведете легко и свобоно! Сразу чувствуется, что полностью в теме!

Спасибо большое за видео, очень приятно слушать Вас, понятно объясняете!

Отличное видео, большое спасибо!!! Очень чётко, понятно и просто! Примеры супер!

Большое спасибо за подробное объяснение с отличными примерами!

Михаил, спасибо! Отличное видео! Надеюсь на продолжения темы тестирования! 8-)

Спасибо большое, отличное видео! Как раз то, что нужно!

Ух, информативно и по пунктикам, как раз как надо) все за час разложил, даже css задел) Не помешало бы конечно еще задеть API тесты, но было круто)

Очень качественное видео про тестирование React приложения. Спасибо.

Тесты это круто, спасибо за видео! :)

Спасибо за видео по тестам в React!

Спасибо за материал. Для старта самое оно!

Немного по полочкам в голове расставили, спасибо большое

Замечательное объяснение! Спасибо!

Спасибо вам, очень информативно и без воды

решил посмотреть чуть позже, смотрю уже 3 месяца прошло с моего прошлого комента, в общем начинаю смотреть, за контент спасибо)))

Спасибо! Отличный материал

Дякую за відео, класні кейси покриті для початківців. дуже зрозуміло!

Спасибо вас огромное) Изучаю Реакт сейчас, поняла без усилий и пересмотров!)

Отличная подача, спасибо. Пару моментов: 1. не dinamyc a dynamic, там еще были грамматические ошикби (советую установить плагин у vs code - Code Spell Checker) 2. toHaveStyle работает в том случае, если ты передашь стили (display: flex) через атрибут style, иначе это просто стили с класса

Такой добрый осенний голос)

Спасибо за Ваш труд

Круто! Спасибо!))

Отличное видео!

30:00 muck function 32:51 screen.debug() 38:00 userEvent.type() - check onChange function with help of jest.fn() mock function 46:50 test classes

Крутая подача, странно что так мало подписчиков

большое спасибо!

круто, спасибо

Спасибо!

Михаил, спасибо большое за уроки! У меня такой вопрос к вам - как подключить в VS code автокомплит методов jest?

Спасибо за видео. Ряд вопросов: 1. Можно ли конфигурировать определенный тест так, что если он проваливается - прерывается все тестирование 2. Если разрабатывать через тестирование. Можно ли тесты помечать типа "функционал не реализован". Т.е. красным отображается в статистике, но сам тест не выполняется. 3. Возможно ли доработать тест динамического тестирования класса в Search. Т.е в рамках одного теста изначально поле ввода пустое - проверяем отсутствие класса filled. Потом userEvent.type() - проверяем появление этого класса. Сам попробовал не получилось - как я понимаю потому что нужно подсунуть стейт... но тест валится и не дает использовать useState.

Спасибо братишка что все так четко объяснил!

Спасибо за видео. Главный вопрос - как понять какие тесты действительно нужно писать, а какие нет? потому что кажется, что можно придумать под 100 тестов на каждую мелочь и увеличить время разработки в 5 раз, не получив сопоставимой пользы.

Топ👍🏻

Хорошее видео, но на мой взгляд с тестом стилей тут что-то не то, тестирование по classNames противоречит философии тестирования, тесты должны рассматривать проект с точки зрения пользователя, а пользователю не важно есть ли className с определенным именем на определенном элементе, classNames могу поменяться/перетасоваться так что UI останется прежним, а тесты упадут. По идее правильно было бы смотреть на конкретные стили, изменился ли backgroundColor после какого-либо действия и тд, но react-testing-library при своей эмуляции не создает дом и стилей уэтих элементов не посмотреть(

Подскажите, пожалуйста, насчет всех видов тестирования. Нужно ли в одном проекте использовать юнит-тестирование, интеграционное и end2end тестирование? Или ты выбираешь какой вариант тебе ближе и тот постоянно используешь?

а может быть метод toHaveStyle() проверяет наличие атрибута style у элемента, ну по типу ?? это предположение))

ни у кого не появлялась ошибка Warning: An update to App inside a test was not wrapped in act(...) в интеграционных тестах? не пойму как решить p.s. оборачиваю в act. но начинает ругаться ESLint: Avoid wrapping Testing Library util calls in `act`(testing-library/no-unnecessary-act)

Дякую.

не знал про либу classnames - понравилась))

Еще интересно как работать с редаксом в тестах. И скажите, пожалуйста. Зачем нужны такие простые тесты, если я во время разработки сам вижу, что выводится на страницу, а что нет?

Было бы здорово если вы расскажите про то как работать с ошибками в React.

Если у кого самый последний тест кейс не отрабатывает то это из за того что те места кода которые вызивают обновление стейта нужно оборачивать в act(); test("search filter works", () => { render(); expect(screen.getByText("react")).toBeInTheDocument(); expect(screen.getByText("css")).toBeInTheDocument(); act(() => { userEvent.type(screen.getByRole("textbox"), "script"); }); expect(screen.queryByText('css')).toBeNull(); expect(screen.queryByText('java script')).toBeInTheDocument(); }); Вот так вот оно отработало без ошыбок, а то пару часов бился и не мог понять почему у автора все работает а у меня нет, но потом перезапустил проект и запустил тесты и мне насипалось кучу warning где как раз и советуется , те места которые вызивают обновление стейта нужно оборачивать в act(); Спасибо автору за урок .

Не работает почему-то тест самый последний с фильтрацией, в консоли говорится, что нужно использовать обёртку act()

Интересно, а какую то отдельную ошибку можно игнорировать в Jest? Нашел, как отдельные папки в игнор добавлять, а как конкретное правило игнорить...

Подскажите , как эти тесты работают если в приложении задействован redux?

возможно прослушал, а что означает значает / / эти штуки и значек i после них?

АААААААА белая тема в вскоде 😲😲😲😲

использую в своем проекте, но получаю ошибку на использование jest.fn(). пишет что jest is not defined. установил отдельный пакет jest globals, получил следующую ошибку Do not import `@jest/globals` outside of the Jest test environment. как можно решить данную проблему?

+

Ну все, после этого видоса я точно готов жениться )

Планируете записывать видео курс Jest Enzyme? На всем ютубе инфа размазана, приходится часами слушать неструктурированные, местами не понятные обучающие видеоролики. То-то дело Ваши! Я бы и на платной платформе купил ваш курс по этой теме, но нету, все полноценные курсы на английском только!

Это одно русское видио в конце 2023 года !! Которое реально полезное и помогает понять как работают тесты с реактом и не только ! По больше бы реально полезных видео от @Mихаил Непомнящий .

Добрые люди,подскажите начинающему AQA js где этот шаблон взять? Установила @testing-lib.../react и jest-dom но никаких файлов кроме node-modules и .json нету(((