92 - тестируем компоненты, тесты, react-test-renderer - React JS

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Тема тестирования - мутная и сложная. Но безумно интересная и полезная))
Мы научились с вами в этом выпуске тестировать бизнес логику, а именно наши reducer-ы:
• 89 - Тесты, jest, tdd,...
В данном выпуске мы научимся тестировать компоненты:
будем их "фейково" отрисовывать, "фейково" взаимодействовать с ними и проверять, что там с нашей компонентой произошло.
Тема сложная. Материала много... Мы будем постепенно осваивать это искусство - искусство tdd (test driving development)
Для теста компонент будем подключать библиотеку react-test-renderer
Обратите внимание: устанавливайте версию, такую же, какая у вас версия react-а
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#tdd #reactJS #тестирование #практика #пример #уроки #курс

[@MikhailKuklenkov]

Я человек простой. Смотрю урок от Димы - ставлю жирнющий лайк. Благодарю за мега труд, Дима! #tdd #reactJS #тестирование #практика #пример #уроки #курс

[@yuliiashpak9719]

Чем больше узнаю, тем больше понимаю, как мало я знаю) Спасибо за уроки React Redux . Уже даже спится плохо, если знаю, что там на канале новый урок а я его не посмотрела, в сети так мало людей, которым не влом рзажевать другим то, что они поняли, и еще меньше тех, кто умеет это делать качественно, а ты большой молодец!

[@ITKAMASUTRA]

Спасибо и пожалуйста))) И спи спокойно, ибо важно не сойти с ума)) а сфера незнания будет всё увеличиваться и увеличиваться)))

[@user-zt6nr7ug6n]

@@ITKAMASUTRA и для этого к нам пришел chatgpt, который + - справляется с unit тестами) Но за урок спасибо, очень полезно понимать их роботу!

[@user-yx7in9nl1d]

Спасибо большое!!! Я был недопрограммист, теперь я ещё и недотестировщик))) Но нисего, бомбим по кругу заново, чтобы стать истинными самураями!!

[@pashabezk]

2022. Сложно смотреть. Какие-то кусочки уже неактуальны. К Димычу никаких вопросов, все супер! Но вот желание изучать тестирование отваливается. Хотя и надо! Обязательно ещё вернусь к этой теме

[@genapolyakov]

и в новом обновлении нужно писать тест в App.test.js: import { createRoot } from 'react-dom/client'; test('renders without crashing', () => { const container = document.createElement('div'); const root = createRoot(container); root.render(); root.unmount(); }); ReactDom импортировать не нужно! По другим позициям тоже много изменилось. Разбираюсь пока

[@shhhamsy2304]

в новой версии текперь по другому, я написал тест вот так: import SamuraiJSApp from "./App"; import {createRoot} from "react-dom/client"; it('renders without crashing', () => { const div = document.createElement('div'); const root = createRoot(div); root.render(); root.unmount(); });

[@is_eliseeva]

спасибо!

[@n0escape]

август 2023 - код Димыча работает без ошибок

[@user-eq7dy4pl3j]

Спасибо, апрель 2024 - помогло

[@genapolyakov]

Сейчас много поменялось в 2022. изменился синтаксис и теперь вылетает ошибка с render, нужно использовать вместо этого createRoot и в новом обновлении нужно писать тест в App.test.js: import { createRoot } from 'react-dom/client'; test('renders without crashing', () => { const container = document.createElement('div'); const root = createRoot(container); root.render(); root.unmount(); }); ReactDom импортировать не нужно!

[@Karifax]

Спасибо, работает

[@ivanrussui4126]

React 18 версия?

[@marynakosiv3750]

оч полезно!! мне кажется именно такие видео полезны джунам!как ориентироваться когда не все очевидно!

[@vladyslavkravchenko5955]

49:57 уровень профессионализма - рассказывать тему и в попыхах искать зарядку для ноута😂 лучший🙌

[@marsonleonardovich4036]

Спасибо, очень полезный был урок! LIKE!

[@ctumyji9737]

Спасибо за урок! Было интересно и познавательно! Летим дальше! React JS от Димыча - бомба! :)

[@razlond159]

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

[@user-bd4lw9hx3s]

Сколько всего интересного! Дмитрий очень хороший преподаватель! Отличный курс по React - Redux! Какой же вы добрый и деятельный человек, Дмитрий! Настоящий самурай! IT-KAMASUTRA, вперед! Отличный урок по тестированию React - компонентов.

[@ltmte]

Есть такое ощущение, что для тестов нужно тоже писать тесты

[@user-wx9hk4xz2w]

ахахаха

[@sega9605]

🤣

[@user-bl4kq1ms5p]

так и делают

[@user-co9wx7fo9g]

Спасибо что продолжаешь выкладывать я сейчас активно учу js после начну Реакт продолжай выкладывать спасибо

[@user-qs7ij8df4q]

Большое спасибо за курс! Димыч, ты лучший!)) тестируем компоненты, тесты, react-test-renderer

[@amaxe12345]

Спасибо! тестриуем компоненты, react-test-renderer - React JS #tdd #reactJS #тестирование

[@eliothome8056]

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

[@tema_skakun]

спасибо за выпуск, Димыч) летим дальше, полёт нормальный)) #tdd #reactJS #тестирование #практика #пример #уроки #курс

[@maxim955]

Спасибо большое за твои видео. Я безмерно благодарен. Ровно после этого видео получил оффер

[@denweb2408]

Классный урок по тестированию)!

[@ole_oli]

Спасибо Димычь. Понял как тестить. Видос огонь, как всегда. react-test-component.

[@user-kn2ou2pu3e]

Я уже переделала ProfileStatus в функциональный компонент, get instance можно получить только у классового компонента судя по документации. Немного зашла в тупик, но придумала как написать тест для фунционального компонета. Этот тест проверяет совпадает ли текст в спане со статусом из пропсов. describe('Profile status component', () => { test('Status from props should be in state', () => { const testStatusStr = 'Test status'; const component = TestRenderer.create(); let statusInSpan = component.toJSON().children[0].children[1] expect(statusInSpan).toBe(testStatusStr) }) }) Не знаю делают так или нет, но тест прошел))

[@n0escape]

Главная идея урока - научится основным принципам тестирования. Основной принцип программного тестирования - программно имитировать пользовательское взаимодействие - ожидая некоторый результат. Первая часть урока, касается теста App компоненты jestом, на то, рисуется она без проблем или нет. Однако тест ломается если не передать нужные вещи для отрисовки самой компоненты. Поэтому мы вынесли оборачивание BrowserRouter в отдельную комопоненту, которую и будем тестривать. Принцип теста. Создаем выдуманный div и рендерим его в VirtualDOM передавая нужную компоненту AppWithBrowserRouter, а после демонтируем ее из div: test('renders App component', () => { const div = document.createElement('div') ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }) Итак. Далее рассматриваем библиотеку react-test-renderer для теста компонент. Устанавливаем библиотеку как на видео. Проверяем версию react и устанавливаем коммандой: npm i --save-dev react-test-renderer@версия реакта После приступаем к тестам (тестируем ProfileStatus в отдельном файле). Новая инфа. Есть возможность группировать тесты. Для этого пишем следующий синтаксис describe('название группы тестов', () => { test('sназвание теста', () => { //тест }) }) Для классовых компонент и их внутренностей использвуют const instance = component.getInstance(); Из дальнейших тестов, важно. getInstance() нельзя использовать при тесте функциональных компонент (не классовых). Для функциональных комопонент и их внутренностей используют const root = component.root; Изза этого первый тест претерпел изменений. Т.к компонента ProfileStatus уже функциональная. test('status form props should be in state', () => { const component = create(); const root = component.root; const span = root.findByType("span"); expect(span.children[0]).toBe("status text") }) Чтобы не засорят коммент опишу тесты которые описывают некоторые кейсы: 1) Обработка ожидания ошибки. Тоесть предполагаем что на выходе будет ошибка. Для этого в expect передаем функцию в которой ожидается ошибочный параметр и после пишем .toThrow(): test('after render input shouldn`t be shown', () => { const component = create(); const root = component.root; //ожидание комопненты expect(()=>{ const span = root.findByType("input"); }).toThrow() }); 2) ожидание значение с логическим нет. После ecpect() пишем .not test('after render span shold be shown v2', () => { const component = create(); const root = component.root; const span = root.findByType("span"); expect(span).not.toBeNull() }); 3) Имитация действия с элементом. Важно, перед использованием убедиться в передаваемом действии на элемент, чтобы получить его из props Вобщем чтобы имитировать действие (допустим дабл клик), нужно вызвать функцию действия, пришедшую из props span.props.doubleClick() Тест дейстия по клику выглядит так: test('after doubleClick on span shold be changed to input whith correct statust', () => { const component = create(); const root = component.root; let span = root.findByType("span"); span.props.onDoubleClick(); let input = root.findByType("input"); expect(input.props.value).toBe("status text") }) }) 4) Отслеживание колличества вызвовов функции. В тесте можно создать выдуманный колбек, колличество вызовов которого, можно отследить. Создание функции: const mockCallBack = jest.fn( (передаваемые значения) => {тело функии} ) Отслеживание: expect(mockCallBack.mock.calls.length).toBe(1) Пример теста: test('callback should be called', () => { const mockCallBack = jest.fn( () => { } ) const component = create(); const instance = component.getInstance(); root.deactivateEditMode(); expect(mockCallBack.mock.calls.length).toBe(1) }) Важно! В примере указан способ для теста функции в классовой компоненте. Однако в функциональной, такой способ не сработает. На текущий момент (август 2023), не нашел способа тестирования фуинкий в функциональных комнонентах. Если найдете решение, прошу отписать в ответ

[@user-js4il4tp9h]

Круто что продолжаешь выкладывать уроки. Я только на 37 но дойду до конца

[@user-tz9rc7hn6y]

Круто! P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно, tdd, test, тест, react-test-renderer

[@mykhailostepanishchev6472]

Спасибо классный выпуск ! react-test-renderer - React JS

[@bitcoin-]

Мне понравилась тема!Буду ее изучать глубже!

[@user-pv5is5pz4j]

Спасибо за урок! Тестирование компонент, react-test-render, jest

[@bosfaction]

Благодарю, Димыч!!! тестируем компоненты, react-test-renderer #React #JS #tdd #reactJS #тестирование

[@user-nk6ih7uh1h]

Дима,красавчик. mock, Jest, react-test-render, TDD. Честно говоря, не самая приятная тема, но что поделать. По-прежнему лучший курс по React JS и JavaScript

[@hrachhambardzumyan3300]

Привет ! ! ! . Большое спасибо за курс .

[@user-tf6jz7hj9d]

tdd крутой вводный урок получился! Спасибо!

[@darjat.1069]

Пока делала тесты и пыталась понять, почему они не работают, внезапно поняла, что с тестами всё отлично. С тестами всё отлично, а вот в коде всё это время была нелепая ошибка, которую я даже не замечала.) Тесты огонь. Просто необходимая штука.

[@lvasmart3516]

А ума не хватило, здесь описать свою ошибку ?!

[@dididie158]

@@lvasmart3516 невежа

[@dimitriitkach7697]

spasibo za urok - 92 - тестриуем компоненты, react-test-renderer - React JS

[@semial]

Спасибо за урок! react-test-renderer reactjs react redux

[@user-qq5vo5hn6x]

Для каждого вида теста, сделал комментарий к каждой строчке, в файле с тестом, прямо в коде, шпаргалка. Летим!!!

[@ritaravinsky8262]

Спасибо! тесты компонент, react-test-renderer.

[@STRIPPEDSTAR]

Тесты это щикарно)

[@user-qq5vo5hn6x]

2021 г. react 17.0.1 - Базовый тест App отличается от теста версии Димыча, пришлось повозиться, что бы сделать его зелёным. ) Тест по умолчанию, ищет в отрисованном дереве ссылку learn react , которой там давно уже нет. Нужно дать для поиска то, что есть в вашем дереве на самом верху, - присвоить атрибут role к div, который рисуется в верху(какие div видны тесту, будет видно в ошибке к тесту), а затем найти его через div = screen.getByRole(/main/i) - тест зелёный Летим дальше!!! P.S мысли переписать тест на тест, как у Димыча в ролике, проскакивали)

[@user-np9mq5xc7j]

я так понимаю нужный нам div это первый див в render внутри App, с ним эти махинации делать?

[@user-np9mq5xc7j]

Крутил по всякому, никак не получилось повторить что бы работало. Сделал то что у Димыча.

[@user-ly9ur6fz3x]

Спасибо. Покрутила и все вышло. В терминале указывает доступное место для вставки role.

[@vladimirww5152]

Полезная штука, эти тесты для JS и React и Redux!

[@georgepustovit8728]

Димыч, лайфах как жать меньше кнопок: чтобы открыть ссылку в новой вкладке нажми на нее колесиком мыши (эквивалентно трем пальцам на тачпаде) Уроки супер, спасибо)

[@oksanamishota6514]

Спсаибо за тесты, react-test-renderer - React JS

[@yaroslavoz]

Димыч ты как всегда зе бест оф зе бест оф зе бест! Кросавчег! Твоя подача и объяснения - уникальны. Даже на англоютубе я такого не видел Ты крут! Я уже устроился, но на работе нужно внедрять тестирование, нигде нормального контента не нашел на эту тему пока, только здесь! !"На пальцах разжевал" )))

[@user-iz8qc8iv5b]

Димыч красава! Мы красавы кто дошел сюда! Истинные самураи! Пришел из php и бэка на Laravel! Думал что реакт сложный и запутанный но Димыч разжевал все как надо!

[@crumblemusic]

У кого красным подчеркивается root.findByType() вы можете тесты сделать асинхронными, например так: test('test', async () => { ... let span = await root.findByType("span"); ... })

[@user-wf8bu6mt2i]

Лайк за тести!

[@Kalebra013]

Greate lesson! Test Driven Development))

[@mhersimonyan974]

test of components, тестируем компоненты, react-test-renderer , React, JS Погнали!

[@bugaga8144]

Просто просмотрел выпуск и понял, что на моем уровне пока это будет слишком, просто ознакомился что это и для чего. А так сложилось мнение что теме тестов, настолько обширная, что действительно можно снять отдельно 100 выпусков по им. Летим дальше осталось 8 выпусков и пора на собесы

[@webbomj]

Взяли куда нибудь?

[@bugaga8144]

@@webbomj Да в Апреле 2022 года устроился

[@webbomj]

@@bugaga8144 Поздравляю!

[@andreysv7752]

тесты это пушка!

[@annabolbot1228]

react-test-renderer - React JS курс супер

[@MooMonero]

Ура, тесты !

[@user-rr1ju1ck2u]

18:06 "скопирую этот код". поржал, спасибо )))

[@user-in5qb3ml4l]

Летим !

[@logizm9431]

этот урок можно просто просмотреть ))

[@r_yunusov]

Спасибо за качественный контент) Твои видео реально помогают в решении коммерческих задач для джунов) Кстати, ты слышал что-нибудь о "Стачке"?

[@ITKAMASUTRA]

Неа... буду гуглить!!

[@r_yunusov]

@@ITKAMASUTRA я думаю твое выступление помогло бы в развитии инкубатора)

[@Aleks-lk1et]

Спасибо! 2022! Установил версию как сказал Димыч версия "react-test-renderer" должна быть как у React. У меня получилось такая: >npm i react-test-renderer@17.0.2 --save-dev. Все тесты как на видео прошли. Димон: "Я красавчик, ну и значит и вы красавчики. Смотрим, кто случайно закомментировал и отрываем тому руку, друзья!" Идем дальше.

[@drilling_guitar]

Привет, у меня такая же версия реакта, но не пошло. Ругается на зависимость react-redux. Кстати у тебя какая версия react-redux сработала?

[@user-wd3tl2rx9p]

Димыч, спасибо. тестируем компоненты, тесты, react-test-renderer

[@yuliiashpak9719]

сегодня тоже, только утром сидела тупила минуту вспоминала как length пишется))

[@user-ww7tv5cw3w]

Жизненно

[@maxkos6184]

Димыч молодец!!! React, Jest, react-test-render, TDD !!!! Про "хитрожопые функции" понравилось ))) Димыч отжигает

[@ollegat]

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

[@maksym_shkaf]

тестируем компоненты, тесты, react-test-renderer - React JS Спасибо!)

[@aidosbatyrkulov3272]

The brilliant course

[@arayoflight]

react-test-renderer - React JS. В VSC тесты можно запустить в сценариях npm, нажав run на test. Правда, они все сразу запускаются, но занимает это секунды.

[@user-em8ni8mt7d]

Раньше находила комментарий, поделюсь. Можно не проделывать все те процедуры которые Димыч проделывает в видео, можно в самом тесте обернуть роутерами, я не знаю насколько это правильно, (если не правильно отпишитесь пжл.) но у меня работает. вот пример кода. it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( , div); ReactDOM.unmountComponentAtNode(div); });

[@marina-ej4qd9kc1wh]

Посмотрела спустя рукава, очень тема для меня мутная. Но потом вернусь, пересмотрю как следует. Спасибо! react-test-renderer

[@user-pc9bl7uf1l]

Благодарю!

[@MilkeeyCat]

как же хорошо что я переделал на функциональный компонент

[@travelOpens]

Была ошибочка у меня. При проверки записи в стейт, ничего не передавалось. Все что было с статусами падало. Спустя пол часа проб и ошибок, оказалось что у нас в стейте написано "!this.props.status". Если удалить восклицательный знак, все тесты стали успешными. #react #react-test-renderer #react-test Благодарю Димыч и с ДР !)

[@SergeSchekhovtsov]

Длинное видео, но полезное и интересное!

[@bitcoin-]

Я просто с нетерпением жду продолжение курса))очень очень жду!

[@user-ml8hn5kg9e]

Сегодня 19.11.21г Очень понравился урок по тестированию реакта!

[@sharkman6434]

стируем компоненты, тесты, react-test-renderer - React JS test jest react mock testing components спасибо бро !

[@user-wj6ue7nt5g]

Супер!

[@sanbuz]

Спасибо

[@olegthesheriff]

Тесты, тесты, ох как не просты!

[@olexandrkozirskiy6917]

тестируем компоненты, тесты, react-test-renderer - React JS 21.08.2023

[@ivanmiarkulau8320]

TDD - это тема) jest - удобный инструмент для тестирования)

[@ivanrussui4126]

Спасибо Дима, приходилось немного писать на работе авто-тесты на Python используя библиотеку Selenium, очень нравилось, жаль что с мобилизацией прикрыли курс. Так вот в целом похоже)

[@STRIPPEDSTAR]

Ребят для тех кому интересно как тестят нынче kzbin.info/www/bejne/kJ65c3ammsuEm5o наиболее адекватное видео которое показывает современный синтаксис для тестов, если нашли более понятное - не зажмите ссылку..

[@ruslanaliev2933]

Годно!

[@Yukrop]

Очень годно спс

[@bitcoin-]

тестриуем компоненты, react-test-renderer - React JS

[@kuko932]

"Starting from version 3.3.0 create-react-app uses react-testing-library as the default testing library. I wrote this guide before react-testing-library was a thing: it focuses mostly on react-test-renderer/Act API which are a bit more low level." цитата из статьи из видео

[@Al4ii]

ой, как я кайфую!!!

[@v_korol]

Круто! #tests, #reactTests, #reactTestsComponent, #unitTests, #reactTestRenderer

[@alexandrcorbin1709]

Дима, огромная просьба! Пожалуйста, сними ролик как удалять сообщения. Очень много времени потратил и не получилось ничего сделать. Всем будет очень полезно узнать, как сделать это грамотно. Спасибо!

[@muhammaddzhabrailov1238]

Test Driven Development, jest unit test. Well done sensei!!!

[@user-il3vn7ye4n]

Димыч красава!)

[@milter2539]

Урок 92. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:

[@sergeko9443]

Круто на гитре играешь !

[@oconnor4417]

Димыч спасибо ! TDD React Jest ❤

[@alexanonymous5823]

как просто тестировать реакт с react-test-renderer. спасибо. лайк однозначно=))

[@user-dc1cr5ny3q]

Как всегда круто, react-test-renderer - React JS. Летим дальше!!))))

[@pauldudich]

react-test-renderer хорошая штука для теста

[@taras8068]

Testing components, react test renderer, react addons test utils, jest. Спасибо за уроки!

[@marlonbrando458]

Комментарий и лайк!

[@akuma8865]

Тестирование, компонента, jest!

[@user-dq5lt2rx3y]

Lesson_92_Done!

[@esken97]

Спасибо Димыч, tdd

[@Sentensos]

Пришлось в итоге webstorm расчехлять. С прошлых уроков пылился установленный. Чтобы в VSC настроить дебаг надо еще кучу времени убить.

[@technical777]

Testing component in React: взрыв мозга, у меня тест не прошел, работаю в Visual Code, Visual дебажит внутри везде только не в тестовых файлах. В самом тесте пришлось компонент в create обернуть не видел store. Потом ошибка падала на getInstance, сейчас ошибка падает на expect :))) Вообщем все хорошо, как обычно что то не получается - летим дальше, тесты пока отложил, вернусь к ним в течении недели )

[@vitaliyirtlach]

Если ты еще задаешься данным вопросом то оберни свою компоненту в BrowserRouter и Provider и не забудь сделать импорты!