Тестирование React приложения
Вставка
- Опубліковано 23 чер 2021
- Как писать тесты для React приложений и какие виды тестов бывают, как начать писать первые тесты и повысить надежность своих компонентов. Разбираем React Testing Library, который доступен из коробки при использовании утилиты create-react-app.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Спустя два года все равно актуально, благодарю за качественный материал!
Очень крутая дикция и манера подачи
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, динамическая проверка
Михаил, это видео - именно то что было необходимо мне прямо сейчас. Посмотрю его как только будет свободное время. Огромное Вам спасибо!
Михаил, классно объясняете - спокойно, хорошо, понятно. Спасибо большое!!!!!
Спасибо за видео урок! Примеры компонентов и как их тестировать были замечательные. Хочу пожелать дальнейшего развития тебе и твоему каналу!
Как же вовремя!) Спасибо огромное. Типа подписался несколько месяцев назад из-за одного видео, даже вспомнить не могу - какого, а тут просто то, что нужно в отличном виде. Вот так удача))) Очень большое спасибо!
ОГРОМНОЕ СПАСИБО!! Преподавание ведете легко и свобоно! Сразу чувствуется, что полностью в теме!
Спасибо большое за видео, очень приятно слушать Вас, понятно объясняете!
Большое спасибо за подробное объяснение с отличными примерами!
Отличное видео, большое спасибо!!! Очень чётко, понятно и просто! Примеры супер!
Спасибо за видео по тестам в React!
Спасибо вам, очень информативно и без воды
Спасибо большое, отличное видео! Как раз то, что нужно!
Замечательное объяснение! Спасибо!
Спасибо за материал. Для старта самое оно!
Тесты это круто, спасибо за видео! :)
Очень качественное видео про тестирование React приложения. Спасибо.
Михаил, спасибо! Отличное видео! Надеюсь на продолжения темы тестирования! 8-)
Немного по полочкам в голове расставили, спасибо большое
Ух, информативно и по пунктикам, как раз как надо) все за час разложил, даже css задел)
Не помешало бы конечно еще задеть API тесты, но было круто)
Спасибо! Отличный материал
Спасибо вас огромное) Изучаю Реакт сейчас, поняла без усилий и пересмотров!)
Спасибо за Ваш труд
Отличная подача, спасибо. Пару моментов:
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
решил посмотреть чуть позже, смотрю уже 3 месяца прошло с моего прошлого комента, в общем начинаю смотреть, за контент спасибо)))
Такой добрый осенний голос)
Дякую за відео, класні кейси покриті для початківців.
дуже зрозуміло!
Отличное видео!
Круто! Спасибо!))
Крутая подача, странно что так мало подписчиков
Михаил, спасибо большое за уроки! У меня такой вопрос к вам - как подключить в VS code автокомплит методов jest?
большое спасибо!
круто, спасибо
Спасибо!
Спасибо братишка что все так четко объяснил!
Спасибо за видео. Главный вопрос - как понять какие тесты действительно нужно писать, а какие нет? потому что кажется, что можно придумать под 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)
Подскажите, пожалуйста, насчет всех видов тестирования. Нужно ли в одном проекте использовать юнит-тестирование, интеграционное и end2end тестирование? Или ты выбираешь какой вариант тебе ближе и тот постоянно используешь?
Зависит от требований заказчика. Потому как он и оплачивает время на создание тестов. Это дорого. Юнит тесты - самые дешевые, end2end - самые дорогие. В идеале, чтобы были все виды тестов.
Спасибо за видео. Ряд вопросов:
1. Можно ли конфигурировать определенный тест так, что если он проваливается - прерывается все тестирование
2. Если разрабатывать через тестирование. Можно ли тесты помечать типа "функционал не реализован". Т.е. красным отображается в статистике, но сам тест не выполняется.
3. Возможно ли доработать тест динамического тестирования класса в Search. Т.е в рамках одного теста изначально поле ввода пустое - проверяем отсутствие класса filled. Потом userEvent.type() - проверяем появление этого класса. Сам попробовал не получилось - как я понимаю потому что нужно подсунуть стейт... но тест валится и не дает использовать useState.
По первым двум вопросам не подскажу, у меня нет ответа.
По второму - стейт подсовывать не надо. Пользовательское действие через userEvent уже должно сымитировать изменение стейта, а значит уже можно проверять на предмет того, случилось ли изменение или нет. Можно в один тест это положить и последовательно в одном it утверждении сначала проверить наличие класса при пустом поле, а потом выполнить userEvent и посмотреть что стало в наборе классов.
Интересно, а какую то отдельную ошибку можно игнорировать в Jest? Нашел, как отдельные папки в игнор добавлять, а как конкретное правило игнорить...
а может быть метод toHaveStyle() проверяет наличие атрибута style у элемента, ну по типу ??
это предположение))
Хорошее видео, но на мой взгляд с тестом стилей тут что-то не то, тестирование по classNames противоречит философии тестирования, тесты должны рассматривать проект с точки зрения пользователя, а пользователю не важно есть ли className с определенным именем на определенном элементе, classNames могу поменяться/перетасоваться так что UI останется прежним, а тесты упадут. По идее правильно было бы смотреть на конкретные стили, изменился ли backgroundColor после какого-либо действия и тд, но react-testing-library при своей эмуляции не создает дом и стилей уэтих элементов не посмотреть(
Топ👍🏻
Не работает почему-то тест самый последний с фильтрацией, в консоли говорится, что нужно использовать обёртку act()
Еще интересно как работать с редаксом в тестах. И скажите, пожалуйста. Зачем нужны такие простые тесты, если я во время разработки сам вижу, что выводится на страницу, а что нет?
Разработка - штука итеративная. Когда вносишь доработки или делаешь рефакторинг, не сложно что то сломать. Удержать в голове все нюансы функционала каждого компонента и их взаимодействия не так то просто, а тесты снимают этот вопрос. Одной командой мы узнаем, если что-то пошло не так. Ну и TDD - это когда мы сначала описываем тест-кейсы, того как должен вести себя компонент, а потом только берёмся за реализацию. Если не говорить про стили, то базовый функционал можно закрыть, даже не запуская сборку.
не знал про либу classnames - понравилась))
clsx лучше
@@takemukashov3064 к
Ага, уже знаю такую))
Дякую.
Подскажите , как эти тесты работают если в приложении задействован redux?
Да нормально работают. Просто надо учитывать особенности редакса и имитировать стор с провайдером вокруг компонента.
возможно прослушал, а что означает значает / / эти штуки и значек i после них?
Это синтаксис регулярных выражений в JS. Символ i означает регистронезависимый, т.е. одинаково для больших и малых букв.
Было бы здорово если вы расскажите про то как работать с ошибками в React.
Речь про стадию разработки или про стадию production?
@@mishanep Про Boundary
@@HaveFun77777 а что там рассказывать , оборачиваешь в hoc и все. В документации эта тема хорошо раскрыта )
АААААААА белая тема в вскоде 😲😲😲😲
использую в своем проекте, но получаю ошибку на использование 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();
Спасибо автору за урок .
Планируете записывать видео курс Jest Enzyme? На всем ютубе инфа размазана, приходится часами слушать неструктурированные, местами не понятные обучающие видеоролики. То-то дело Ваши!
Я бы и на платной платформе купил ваш курс по этой теме, но нету, все полноценные курсы на английском только!
С Enzyme уже несколько лет не работал. Не знаю как там библиотека развивается. Вообще курс по тестированию рассматривается мною как один из возможных в качестве следующего проекта. Но не могу ничего обещать.
Ну все, после этого видоса я точно готов жениться )
+
Это одно русское видио в конце 2023 года !! Которое реально полезное и помогает понять как работают тесты с реактом и не только ! По больше бы реально полезных видео от @Mихаил Непомнящий .
Добрые люди,подскажите начинающему AQA js где этот шаблон взять? Установила @testing-lib.../react и jest-dom но никаких файлов кроме node-modules и .json нету(((