Тестирование React приложения
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- Как писать тесты для React приложений и какие виды тестов бывают, как начать писать первые тесты и повысить надежность своих компонентов. Разбираем React Testing Library, который доступен из коробки при использовании утилиты create-react-app.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
Михаил, спасибо вам за прекрасное объяснение материала. Вы помогли мне разобраться с темой, прикасаться к которой мне не хотелось до последнего)
Очень крутая дикция и манера подачи
Михаил, классно объясняете - спокойно, хорошо, понятно. Спасибо большое!!!!!
Спустя два года все равно актуально, благодарю за качественный материал!
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, динамическая проверка
Спасибо за видео урок! Примеры компонентов и как их тестировать были замечательные. Хочу пожелать дальнейшего развития тебе и твоему каналу!
Такой добрый осенний голос)
Как же вовремя!) Спасибо огромное. Типа подписался несколько месяцев назад из-за одного видео, даже вспомнить не могу - какого, а тут просто то, что нужно в отличном виде. Вот так удача))) Очень большое спасибо!
Ух, информативно и по пунктикам, как раз как надо) все за час разложил, даже css задел)
Не помешало бы конечно еще задеть API тесты, но было круто)
Михаил, это видео - именно то что было необходимо мне прямо сейчас. Посмотрю его как только будет свободное время. Огромное Вам спасибо!
ОГРОМНОЕ СПАСИБО!! Преподавание ведете легко и свобоно! Сразу чувствуется, что полностью в теме!
Спасибо большое за видео, очень приятно слушать Вас, понятно объясняете!
Это одно русское видио в конце 2023 года !! Которое реально полезное и помогает понять как работают тесты с реактом и не только ! По больше бы реально полезных видео от @Mихаил Непомнящий .
решил посмотреть чуть позже, смотрю уже 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
Спасибо вас огромное) Изучаю Реакт сейчас, поняла без усилий и пересмотров!)
Очень качественное видео про тестирование React приложения. Спасибо.
Спасибо вам, очень информативно и без воды
Большое спасибо за подробное объяснение с отличными примерами!
Немного по полочкам в голове расставили, спасибо большое
Отличное видео, большое спасибо!!! Очень чётко, понятно и просто! Примеры супер!
Спасибо за материал. Для старта самое оно!
Дякую за відео, класні кейси покриті для початківців.
дуже зрозуміло!
Михаил, спасибо! Отличное видео! Надеюсь на продолжения темы тестирования! 8-)
Спасибо большое, отличное видео! Как раз то, что нужно!
Спасибо за Ваш труд
Спасибо за видео. Ряд вопросов:
1. Можно ли конфигурировать определенный тест так, что если он проваливается - прерывается все тестирование
2. Если разрабатывать через тестирование. Можно ли тесты помечать типа "функционал не реализован". Т.е. красным отображается в статистике, но сам тест не выполняется.
3. Возможно ли доработать тест динамического тестирования класса в Search. Т.е в рамках одного теста изначально поле ввода пустое - проверяем отсутствие класса filled. Потом userEvent.type() - проверяем появление этого класса. Сам попробовал не получилось - как я понимаю потому что нужно подсунуть стейт... но тест валится и не дает использовать useState.
По первым двум вопросам не подскажу, у меня нет ответа.
По второму - стейт подсовывать не надо. Пользовательское действие через userEvent уже должно сымитировать изменение стейта, а значит уже можно проверять на предмет того, случилось ли изменение или нет. Можно в один тест это положить и последовательно в одном it утверждении сначала проверить наличие класса при пустом поле, а потом выполнить userEvent и посмотреть что стало в наборе классов.
Тесты это круто, спасибо за видео! :)
Спасибо! Отличный материал
Спасибо за видео по тестам в React!
Отличное видео!
Замечательное объяснение! Спасибо!
Спасибо за видео. Главный вопрос - как понять какие тесты действительно нужно писать, а какие нет? потому что кажется, что можно придумать под 100 тестов на каждую мелочь и увеличить время разработки в 5 раз, не получив сопоставимой пользы.
Думаю, что нужно воспринимать тесты как документирование модулей и компонентов, когда опишешь всё закладываемое поведение - тогда пора и завязывать
Крутая подача, странно что так мало подписчиков
большое спасибо!
ни у кого не появлялась ошибка 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)
круто, спасибо
Nice boost 🎉
Спасибо братишка что все так четко объяснил!
Круто! Спасибо!))
Топ👍🏻
Хорошее видео, но на мой взгляд с тестом стилей тут что-то не то, тестирование по classNames противоречит философии тестирования, тесты должны рассматривать проект с точки зрения пользователя, а пользователю не важно есть ли className с определенным именем на определенном элементе, classNames могу поменяться/перетасоваться так что UI останется прежним, а тесты упадут. По идее правильно было бы смотреть на конкретные стили, изменился ли backgroundColor после какого-либо действия и тд, но react-testing-library при своей эмуляции не создает дом и стилей уэтих элементов не посмотреть(
а может быть метод toHaveStyle() проверяет наличие атрибута style у элемента, ну по типу ??
это предположение))
Спасибо!
tohavebeencalledtimes нужно самому делать асинхронным ?
Михаил, спасибо большое за уроки! У меня такой вопрос к вам - как подключить в VS code автокомплит методов jest?
не знал про либу classnames - понравилась))
clsx лучше
@@takemukashov3064 к
Ага, уже знаю такую))
Не работает почему-то тест самый последний с фильтрацией, в консоли говорится, что нужно использовать обёртку act()
Подскажите, пожалуйста, насчет всех видов тестирования. Нужно ли в одном проекте использовать юнит-тестирование, интеграционное и end2end тестирование? Или ты выбираешь какой вариант тебе ближе и тот постоянно используешь?
Зависит от требований заказчика. Потому как он и оплачивает время на создание тестов. Это дорого. Юнит тесты - самые дешевые, end2end - самые дорогие. В идеале, чтобы были все виды тестов.
Было бы здорово если вы расскажите про то как работать с ошибками в React.
Речь про стадию разработки или про стадию production?
@@mishanep Про Boundary
@@Giri-16108 а что там рассказывать , оборачиваешь в hoc и все. В документации эта тема хорошо раскрыта )
Еще интересно как работать с редаксом в тестах. И скажите, пожалуйста. Зачем нужны такие простые тесты, если я во время разработки сам вижу, что выводится на страницу, а что нет?
Разработка - штука итеративная. Когда вносишь доработки или делаешь рефакторинг, не сложно что то сломать. Удержать в голове все нюансы функционала каждого компонента и их взаимодействия не так то просто, а тесты снимают этот вопрос. Одной командой мы узнаем, если что-то пошло не так. Ну и TDD - это когда мы сначала описываем тест-кейсы, того как должен вести себя компонент, а потом только берёмся за реализацию. Если не говорить про стили, то базовый функционал можно закрыть, даже не запуская сборку.
Интересно, а какую то отдельную ошибку можно игнорировать в Jest? Нашел, как отдельные папки в игнор добавлять, а как конкретное правило игнорить...
возможно прослушал, а что означает значает / / эти штуки и значек i после них?
Это синтаксис регулярных выражений в JS. Символ i означает регистронезависимый, т.е. одинаково для больших и малых букв.
Дякую.
Подскажите , как эти тесты работают если в приложении задействован redux?
Да нормально работают. Просто надо учитывать особенности редакса и имитировать стор с провайдером вокруг компонента.
Планируете записывать видео курс Jest Enzyme? На всем ютубе инфа размазана, приходится часами слушать неструктурированные, местами не понятные обучающие видеоролики. То-то дело Ваши!
Я бы и на платной платформе купил ваш курс по этой теме, но нету, все полноценные курсы на английском только!
С Enzyme уже несколько лет не работал. Не знаю как там библиотека развивается. Вообще курс по тестированию рассматривается мною как один из возможных в качестве следующего проекта. Но не могу ничего обещать.
использую в своем проекте, но получаю ошибку на использование jest.fn(). пишет что jest is not defined. установил отдельный пакет jest globals, получил следующую ошибку Do not import `@jest/globals` outside of the Jest test environment. как можно решить данную проблему?
Вероятно у вас используется другой вариант сборки и вам нужно ручками настроить setupTests.js
@@mishanep оказалось что проблема в настройках проекта, создав новый проект с базовыми настройками проверил все и работает как нужно) еще такой вопрос, у меня в компоненте есть элемент при наведении на которого (onMouseEnter) срабатывает функция, как можно протестировать этот момент?
Если у кого самый последний тест кейс не отрабатывает то это из за того что те места кода которые вызивают обновление стейта нужно оборачивать в 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();
Спасибо автору за урок .
АААААААА белая тема в вскоде 😲😲😲😲
Ну все, после этого видоса я точно готов жениться )
+
Добрые люди,подскажите начинающему AQA js где этот шаблон взять? Установила @testing-lib.../react и jest-dom но никаких файлов кроме node-modules и .json нету(((