Это одно русское видио в конце 2023 года !! Которое реально полезное и помогает понять как работают тесты с реактом и не только ! По больше бы реально полезных видео от @Mихаил Непомнящий .
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, динамическая проверка
Отличная подача, спасибо. Пару моментов: 1. не dinamyc a dynamic, там еще были грамматические ошикби (советую установить плагин у vs code - Code Spell Checker) 2. toHaveStyle работает в том случае, если ты передашь стили (display: flex) через атрибут style, иначе это просто стили с класса
Как же вовремя!) Спасибо огромное. Типа подписался несколько месяцев назад из-за одного видео, даже вспомнить не могу - какого, а тут просто то, что нужно в отличном виде. Вот так удача))) Очень большое спасибо!
Спасибо за видео. Ряд вопросов: 1. Можно ли конфигурировать определенный тест так, что если он проваливается - прерывается все тестирование 2. Если разрабатывать через тестирование. Можно ли тесты помечать типа "функционал не реализован". Т.е. красным отображается в статистике, но сам тест не выполняется. 3. Возможно ли доработать тест динамического тестирования класса в Search. Т.е в рамках одного теста изначально поле ввода пустое - проверяем отсутствие класса filled. Потом userEvent.type() - проверяем появление этого класса. Сам попробовал не получилось - как я понимаю потому что нужно подсунуть стейт... но тест валится и не дает использовать useState.
По первым двум вопросам не подскажу, у меня нет ответа. По второму - стейт подсовывать не надо. Пользовательское действие через userEvent уже должно сымитировать изменение стейта, а значит уже можно проверять на предмет того, случилось ли изменение или нет. Можно в один тест это положить и последовательно в одном it утверждении сначала проверить наличие класса при пустом поле, а потом выполнить userEvent и посмотреть что стало в наборе классов.
ни у кого не появлялась ошибка 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)
Спасибо за видео. Главный вопрос - как понять какие тесты действительно нужно писать, а какие нет? потому что кажется, что можно придумать под 100 тестов на каждую мелочь и увеличить время разработки в 5 раз, не получив сопоставимой пользы.
Хорошее видео, но на мой взгляд с тестом стилей тут что-то не то, тестирование по classNames противоречит философии тестирования, тесты должны рассматривать проект с точки зрения пользователя, а пользователю не важно есть ли className с определенным именем на определенном элементе, classNames могу поменяться/перетасоваться так что UI останется прежним, а тесты упадут. По идее правильно было бы смотреть на конкретные стили, изменился ли backgroundColor после какого-либо действия и тд, но react-testing-library при своей эмуляции не создает дом и стилей уэтих элементов не посмотреть(
Если у кого самый последний тест кейс не отрабатывает то это из за того что те места кода которые вызивают обновление стейта нужно оборачивать в 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(); Спасибо автору за урок .
Подскажите, пожалуйста, насчет всех видов тестирования. Нужно ли в одном проекте использовать юнит-тестирование, интеграционное и end2end тестирование? Или ты выбираешь какой вариант тебе ближе и тот постоянно используешь?
Зависит от требований заказчика. Потому как он и оплачивает время на создание тестов. Это дорого. Юнит тесты - самые дешевые, end2end - самые дорогие. В идеале, чтобы были все виды тестов.
Еще интересно как работать с редаксом в тестах. И скажите, пожалуйста. Зачем нужны такие простые тесты, если я во время разработки сам вижу, что выводится на страницу, а что нет?
Разработка - штука итеративная. Когда вносишь доработки или делаешь рефакторинг, не сложно что то сломать. Удержать в голове все нюансы функционала каждого компонента и их взаимодействия не так то просто, а тесты снимают этот вопрос. Одной командой мы узнаем, если что-то пошло не так. Ну и TDD - это когда мы сначала описываем тест-кейсы, того как должен вести себя компонент, а потом только берёмся за реализацию. Если не говорить про стили, то базовый функционал можно закрыть, даже не запуская сборку.
использую в своем проекте, но получаю ошибку на использование jest.fn(). пишет что jest is not defined. установил отдельный пакет jest globals, получил следующую ошибку Do not import `@jest/globals` outside of the Jest test environment. как можно решить данную проблему?
@@mishanep оказалось что проблема в настройках проекта, создав новый проект с базовыми настройками проверил все и работает как нужно) еще такой вопрос, у меня в компоненте есть элемент при наведении на которого (onMouseEnter) срабатывает функция, как можно протестировать этот момент?
Планируете записывать видео курс Jest Enzyme? На всем ютубе инфа размазана, приходится часами слушать неструктурированные, местами не понятные обучающие видеоролики. То-то дело Ваши! Я бы и на платной платформе купил ваш курс по этой теме, но нету, все полноценные курсы на английском только!
С Enzyme уже несколько лет не работал. Не знаю как там библиотека развивается. Вообще курс по тестированию рассматривается мною как один из возможных в качестве следующего проекта. Но не могу ничего обещать.
Добрые люди,подскажите начинающему AQA js где этот шаблон взять? Установила @testing-lib.../react и jest-dom но никаких файлов кроме node-modules и .json нету(((
Михаил, спасибо вам за прекрасное объяснение материала. Вы помогли мне разобраться с темой, прикасаться к которой мне не хотелось до последнего)
Это одно русское видио в конце 2023 года !! Которое реально полезное и помогает понять как работают тесты с реактом и не только ! По больше бы реально полезных видео от @Mихаил Непомнящий .
Спустя два года все равно актуально, благодарю за качественный материал!
Очень крутая дикция и манера подачи
Такой добрый осенний голос)
Михаил, классно объясняете - спокойно, хорошо, понятно. Спасибо большое!!!!!
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 тесты, но было круто)
Очень качественное видео про тестирование React приложения. Спасибо.
Спасибо большое за видео, очень приятно слушать Вас, понятно объясняете!
Отличная подача, спасибо. Пару моментов:
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 месяца прошло с моего прошлого комента, в общем начинаю смотреть, за контент спасибо)))
Большое спасибо за подробное объяснение с отличными примерами!
Михаил, это видео - именно то что было необходимо мне прямо сейчас. Посмотрю его как только будет свободное время. Огромное Вам спасибо!
Спасибо за Ваш труд
Спасибо! Отличный материал
Отличное видео!
Отличное видео, большое спасибо!!! Очень чётко, понятно и просто! Примеры супер!
большое спасибо!
Замечательное объяснение! Спасибо!
Спасибо большое, отличное видео! Как раз то, что нужно!
Дякую за відео, класні кейси покриті для початківців.
дуже зрозуміло!
Спасибо за видео. Ряд вопросов:
1. Можно ли конфигурировать определенный тест так, что если он проваливается - прерывается все тестирование
2. Если разрабатывать через тестирование. Можно ли тесты помечать типа "функционал не реализован". Т.е. красным отображается в статистике, но сам тест не выполняется.
3. Возможно ли доработать тест динамического тестирования класса в Search. Т.е в рамках одного теста изначально поле ввода пустое - проверяем отсутствие класса filled. Потом userEvent.type() - проверяем появление этого класса. Сам попробовал не получилось - как я понимаю потому что нужно подсунуть стейт... но тест валится и не дает использовать useState.
По первым двум вопросам не подскажу, у меня нет ответа.
По второму - стейт подсовывать не надо. Пользовательское действие через userEvent уже должно сымитировать изменение стейта, а значит уже можно проверять на предмет того, случилось ли изменение или нет. Можно в один тест это положить и последовательно в одном it утверждении сначала проверить наличие класса при пустом поле, а потом выполнить userEvent и посмотреть что стало в наборе классов.
Спасибо за видео по тестам в React!
Тесты это круто, спасибо за видео! :)
круто, спасибо
Михаил, спасибо! Отличное видео! Надеюсь на продолжения темы тестирования! 8-)
Спасибо братишка что все так четко объяснил!
Крутая подача, странно что так мало подписчиков
ни у кого не появлялась ошибка 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)
Спасибо!
Спасибо за видео. Главный вопрос - как понять какие тесты действительно нужно писать, а какие нет? потому что кажется, что можно придумать под 100 тестов на каждую мелочь и увеличить время разработки в 5 раз, не получив сопоставимой пользы.
Думаю, что нужно воспринимать тесты как документирование модулей и компонентов, когда опишешь всё закладываемое поведение - тогда пора и завязывать
а может быть метод toHaveStyle() проверяет наличие атрибута style у элемента, ну по типу ??
это предположение))
Круто! Спасибо!))
не знал про либу classnames - понравилась))
clsx лучше
@@takemukashov3064 к
Ага, уже знаю такую))
Nice boost 🎉
Топ👍🏻
Хорошее видео, но на мой взгляд с тестом стилей тут что-то не то, тестирование по classNames противоречит философии тестирования, тесты должны рассматривать проект с точки зрения пользователя, а пользователю не важно есть ли className с определенным именем на определенном элементе, classNames могу поменяться/перетасоваться так что UI останется прежним, а тесты упадут. По идее правильно было бы смотреть на конкретные стили, изменился ли backgroundColor после какого-либо действия и тд, но react-testing-library при своей эмуляции не создает дом и стилей уэтих элементов не посмотреть(
Не работает почему-то тест самый последний с фильтрацией, в консоли говорится, что нужно использовать обёртку act()
Михаил, спасибо большое за уроки! У меня такой вопрос к вам - как подключить в VS code автокомплит методов jest?
Было бы здорово если вы расскажите про то как работать с ошибками в React.
Речь про стадию разработки или про стадию production?
@@mishanep Про Boundary
@@Giri-16108 а что там рассказывать , оборачиваешь в hoc и все. В документации эта тема хорошо раскрыта )
Интересно, а какую то отдельную ошибку можно игнорировать в Jest? Нашел, как отдельные папки в игнор добавлять, а как конкретное правило игнорить...
Если у кого самый последний тест кейс не отрабатывает то это из за того что те места кода которые вызивают обновление стейта нужно оборачивать в 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();
Спасибо автору за урок .
Подскажите, пожалуйста, насчет всех видов тестирования. Нужно ли в одном проекте использовать юнит-тестирование, интеграционное и end2end тестирование? Или ты выбираешь какой вариант тебе ближе и тот постоянно используешь?
Зависит от требований заказчика. Потому как он и оплачивает время на создание тестов. Это дорого. Юнит тесты - самые дешевые, end2end - самые дорогие. В идеале, чтобы были все виды тестов.
АААААААА белая тема в вскоде 😲😲😲😲
Дякую.
возможно прослушал, а что означает значает / / эти штуки и значек i после них?
Это синтаксис регулярных выражений в JS. Символ i означает регистронезависимый, т.е. одинаково для больших и малых букв.
Подскажите , как эти тесты работают если в приложении задействован redux?
Да нормально работают. Просто надо учитывать особенности редакса и имитировать стор с провайдером вокруг компонента.
Еще интересно как работать с редаксом в тестах. И скажите, пожалуйста. Зачем нужны такие простые тесты, если я во время разработки сам вижу, что выводится на страницу, а что нет?
Разработка - штука итеративная. Когда вносишь доработки или делаешь рефакторинг, не сложно что то сломать. Удержать в голове все нюансы функционала каждого компонента и их взаимодействия не так то просто, а тесты снимают этот вопрос. Одной командой мы узнаем, если что-то пошло не так. Ну и TDD - это когда мы сначала описываем тест-кейсы, того как должен вести себя компонент, а потом только берёмся за реализацию. Если не говорить про стили, то базовый функционал можно закрыть, даже не запуская сборку.
использую в своем проекте, но получаю ошибку на использование jest.fn(). пишет что jest is not defined. установил отдельный пакет jest globals, получил следующую ошибку Do not import `@jest/globals` outside of the Jest test environment. как можно решить данную проблему?
Вероятно у вас используется другой вариант сборки и вам нужно ручками настроить setupTests.js
@@mishanep оказалось что проблема в настройках проекта, создав новый проект с базовыми настройками проверил все и работает как нужно) еще такой вопрос, у меня в компоненте есть элемент при наведении на которого (onMouseEnter) срабатывает функция, как можно протестировать этот момент?
Планируете записывать видео курс Jest Enzyme? На всем ютубе инфа размазана, приходится часами слушать неструктурированные, местами не понятные обучающие видеоролики. То-то дело Ваши!
Я бы и на платной платформе купил ваш курс по этой теме, но нету, все полноценные курсы на английском только!
С Enzyme уже несколько лет не работал. Не знаю как там библиотека развивается. Вообще курс по тестированию рассматривается мною как один из возможных в качестве следующего проекта. Но не могу ничего обещать.
Ну все, после этого видоса я точно готов жениться )
+
Добрые люди,подскажите начинающему AQA js где этот шаблон взять? Установила @testing-lib.../react и jest-dom но никаких файлов кроме node-modules и .json нету(((