92 - тестируем компоненты, тесты, react-test-renderer - React JS
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
Тема тестирования - мутная и сложная. Но безумно интересная и полезная))
Мы научились с вами в этом выпуске тестировать бизнес логику, а именно наши reducer-ы:
• 89 - Тесты, jest, tdd,...
В данном выпуске мы научимся тестировать компоненты:
будем их "фейково" отрисовывать, "фейково" взаимодействовать с ними и проверять, что там с нашей компонентой произошло.
Тема сложная. Материала много... Мы будем постепенно осваивать это искусство - искусство tdd (test driving development)
Для теста компонент будем подключать библиотеку react-test-renderer
Обратите внимание: устанавливайте версию, такую же, какая у вас версия react-а
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#tdd #reactJS #тестирование #практика #пример #уроки #курс
Я человек простой. Смотрю урок от Димы - ставлю жирнющий лайк. Благодарю за мега труд, Дима!
#tdd #reactJS #тестирование #практика #пример #уроки #курс
Чем больше узнаю, тем больше понимаю, как мало я знаю) Спасибо за уроки React Redux . Уже даже спится плохо, если знаю, что там на канале новый урок а я его не посмотрела, в сети так мало людей, которым не влом рзажевать другим то, что они поняли, и еще меньше тех, кто умеет это делать качественно, а ты большой молодец!
Спасибо и пожалуйста)))
И спи спокойно, ибо важно не сойти с ума)) а сфера незнания будет всё увеличиваться и увеличиваться)))
@@ITKAMASUTRA и для этого к нам пришел chatgpt, который + - справляется с unit тестами) Но за урок спасибо, очень полезно понимать их роботу!
49:57 уровень профессионализма - рассказывать тему и в попыхах искать зарядку для ноута😂 лучший🙌
Главная идея урока - научится основным принципам тестирования. Основной принцип программного тестирования - программно имитировать пользовательское взаимодействие - ожидая некоторый результат.
Первая часть урока, касается теста 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), не нашел способа тестирования фуинкий в функциональных комнонентах. Если найдете решение, прошу отписать в ответ
2022. Сложно смотреть.
Какие-то кусочки уже неактуальны. К Димычу никаких вопросов, все супер! Но вот желание изучать тестирование отваливается. Хотя и надо! Обязательно ещё вернусь к этой теме
и в новом обновлении нужно писать тест в 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 импортировать не нужно!
По другим позициям тоже много изменилось. Разбираюсь пока
Спасибо большое!!! Я был недопрограммист, теперь я ещё и недотестировщик))) Но нисего, бомбим по кругу заново, чтобы стать истинными самураями!!
Ой, когда ставишь видео на паузу и дебажишь сам, находишь решение и только потом смотришь что дальше. Оййй какое же приятное чувство
Есть такое ощущение, что для тестов нужно тоже писать тесты
ахахаха
🤣
так и делают
Пока делала тесты и пыталась понять, почему они не работают, внезапно поняла, что с тестами всё отлично. С тестами всё отлично, а вот в коде всё это время была нелепая ошибка, которую я даже не замечала.) Тесты огонь. Просто необходимая штука.
А ума не хватило, здесь описать свою ошибку ?!
@@lvasmart3516 невежа
оч полезно!! мне кажется именно такие видео полезны джунам!как ориентироваться когда не все очевидно!
спасибо за выпуск, Димыч) летим дальше, полёт нормальный))
#tdd #reactJS #тестирование #практика #пример #уроки #курс
тестируем компоненты, тесты, react-test-renderer - React JS 21.08.2023
Димыч красава! Мы красавы кто дошел сюда! Истинные самураи! Пришел из php и бэка на Laravel! Думал что реакт сложный и запутанный но Димыч разжевал все как надо!
2021 г. react 17.0.1 - Базовый тест App отличается от теста версии Димыча, пришлось повозиться, что бы сделать его зелёным. ) Тест по умолчанию, ищет в отрисованном дереве ссылку learn react , которой там давно уже нет. Нужно дать для поиска то, что есть в вашем дереве на самом верху, - присвоить атрибут role к div, который рисуется в верху(какие div видны тесту, будет видно в ошибке к тесту), а затем найти его через div = screen.getByRole(/main/i) - тест зелёный Летим дальше!!! P.S мысли переписать тест на тест, как у Димыча в ролике, проскакивали)
я так понимаю нужный нам div это первый див в render внутри App, с ним эти махинации делать?
Крутил по всякому, никак не получилось повторить что бы работало. Сделал то что у Димыча.
Спасибо. Покрутила и все вышло. В терминале указывает доступное место для вставки role.
Сейчас много поменялось в 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 импортировать не нужно!
Спасибо, работает
React 18 версия?
Я уже переделала 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)
})
})
Не знаю делают так или нет, но тест прошел))
Большое спасибо за курс! Димыч, ты лучший!))
тестируем компоненты, тесты, react-test-renderer
Спасибо! тестриуем компоненты, react-test-renderer - React JS #tdd #reactJS #тестирование
Спасибо, очень полезный был урок! LIKE!
Для каждого вида теста, сделал комментарий к каждой строчке, в файле с тестом, прямо в коде, шпаргалка. Летим!!!
spasibo za urok - 92 - тестриуем компоненты, react-test-renderer - React JS
Просто просмотрел выпуск и понял, что на моем уровне пока это будет слишком, просто ознакомился что это и для чего. А так сложилось мнение что теме тестов, настолько обширная, что действительно можно снять отдельно 100 выпусков по им. Летим дальше осталось 8 выпусков и пора на собесы
Взяли куда нибудь?
@@webbomj Да в Апреле 2022 года устроился
@@bugaga8144 Поздравляю!
Благодарю, Димыч!!! тестируем компоненты, react-test-renderer #React #JS #tdd #reactJS #тестирование
Посмотрела спустя рукава, очень тема для меня мутная. Но потом вернусь, пересмотрю как следует. Спасибо! react-test-renderer
в новой версии текперь по другому, я написал тест вот так:
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();
});
спасибо!
август 2023 - код Димыча работает без ошибок
Спасибо, апрель 2024 - помогло
У кого красным подчеркивается root.findByType() вы можете тесты сделать асинхронными, например так:
test('test', async () => {
...
let span = await root.findByType("span");
...
})
Спасибо большое за твои видео. Я безмерно благодарен.
Ровно после этого видео получил оффер
Круто!
P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно,
tdd, test, тест, react-test-renderer
test of components, тестируем компоненты, react-test-renderer , React, JS Погнали!
как же хорошо что я переделал на функциональный компонент
Димыч, спасибо. тестируем компоненты, тесты, react-test-renderer
Димыч, лайфах как жать меньше кнопок: чтобы открыть ссылку в новой вкладке нажми на нее колесиком мыши (эквивалентно трем пальцам на тачпаде)
Уроки супер, спасибо)
Раньше находила комментарий, поделюсь. Можно не проделывать все те процедуры которые Димыч проделывает в видео, можно в самом тесте обернуть роутерами, я не знаю насколько это правильно, (если не правильно отпишитесь пжл.) но у меня работает. вот пример кода.
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render( , div);
ReactDOM.unmountComponentAtNode(div);
});
"Ой, я случайно плюнул в монитор" - Димыч.... ахахахаххаах
Спсаибо за тесты, react-test-renderer - React JS
Летим !
Спасибо!
тесты компонент, react-test-renderer.
Сколько всего интересного! Дмитрий очень хороший преподаватель! Отличный курс по React - Redux! Какой же вы добрый и деятельный человек, Дмитрий! Настоящий самурай! IT-KAMASUTRA, вперед! Отличный урок по тестированию React - компонентов.
Спасибо! 2022! Установил версию как сказал Димыч версия "react-test-renderer" должна быть как у React. У меня получилось такая: >npm i react-test-renderer@17.0.2 --save-dev. Все тесты как на видео прошли. Димон: "Я красавчик, ну и значит и вы красавчики. Смотрим, кто случайно закомментировал и отрываем тому руку, друзья!" Идем дальше.
Привет, у меня такая же версия реакта, но не пошло. Ругается на зависимость react-redux. Кстати у тебя какая версия react-redux сработала?
тестируем компоненты, тесты, react-test-renderer - React JS
Спасибо!)
стируем компоненты, тесты, react-test-renderer - React JS test jest react mock testing components спасибо бро !
Спасибо что продолжаешь выкладывать я сейчас активно учу js после начну Реакт продолжай выкладывать спасибо
18:06 "скопирую этот код". поржал, спасибо )))
тестриуем компоненты, react-test-renderer - React JS
Полезная штука, эти тесты для JS и React и Redux!
сегодня тоже, только утром сидела тупила минуту вспоминала как length пишется))
Жизненно
Спасибо Димычь. Понял как тестить. Видос огонь, как всегда. react-test-component.
tdd крутой вводный урок получился! Спасибо!
Спасибо за урок! Было интересно и познавательно! Летим дальше!
React JS от Димыча - бомба! :)
Урок 92. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
Была ошибочка у меня. При проверки записи в стейт, ничего не передавалось. Все что было с статусами падало. Спустя пол часа проб и ошибок, оказалось что у нас в стейте написано "!this.props.status". Если удалить восклицательный знак, все тесты стали успешными. #react #react-test-renderer #react-test
Благодарю Димыч и с ДР !)
The brilliant course
23:10 лол, вчера Маск, и правда, запустил ракету в космос 0о
И это была первая частная компания которая доставила космонавтов на МКС
@@ЮрийМясников-н5щ так все равно кредит государство дало
А Реакт постепенно сдает позиции mobx)
Круто что продолжаешь выкладывать уроки. Я только на 37 но дойду до конца
Смотрю пока что 10-ый выпуск, многие моменты стали понятными. По документации не мог понять, спасибо тебе за контент!
ох и намучался я с версиями react-test-renderer ,что бы заработало)))
react-test-renderer - React JS. В VSC тесты можно запустить в сценариях npm, нажав run на test. Правда, они все сразу запускаются, но занимает это секунды.
Спасибо за урок!
react-test-renderer reactjs react redux
Дима,красавчик. mock, Jest, react-test-render, TDD. Честно говоря, не самая приятная тема, но что поделать. По-прежнему лучший курс по React JS и JavaScript
Мне понравилась тема!Буду ее изучать глубже!
Спасибо за качественный контент) Твои видео реально помогают в решении коммерческих задач для джунов) Кстати, ты слышал что-нибудь о "Стачке"?
Неа... буду гуглить!!
@@ITKAMASUTRA я думаю твое выступление помогло бы в развитии инкубатора)
Димыч ты как всегда зе бест оф зе бест оф зе бест! Кросавчег! Твоя подача и объяснения - уникальны. Даже на англоютубе я такого не видел Ты крут! Я уже устроился, но на работе нужно внедрять тестирование, нигде нормального контента не нашел на эту тему пока, только здесь! !"На пальцах разжевал" )))
Спасибо классный выпуск ! react-test-renderer - React JS
Спасибо за урок! Тестирование компонент, react-test-render, jest
Greate lesson! Test Driven Development))
React-test-renderer , react , redux, jest, тестируем компонент ! 🚀
TDD - это тема) jest - удобный инструмент для тестирования)
Классный урок по тестированию)!
этот урок можно просто просмотреть ))
react-test-renderer хорошая штука для теста
лично мне это показалось самым мрачным за весь курс))
У меня одного после рефакторинга сломался Redux-form ? как то работает не корректно... набираешь текст и только когда нажимаешь отправить тогда только пишет за максимальное количество символов... ?
Тесты это щикарно)
С компонентами вообще не понятно как и что тестировать, но Димыч как всегда поливает свет знаний!
Тестирование, компонента, jest!
react-test-renderer - React JS курс супер
Привет ! ! ! . Большое спасибо за курс .
"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." цитата из статьи из видео
Ребят для тех кому интересно как тестят нынче th-cam.com/video/ZmVBCpefQe8/w-d-xo.html наиболее адекватное видео которое показывает современный синтаксис для тестов, если нашли более понятное - не зажмите ссылку..
Годно!
Очень годно спс
Тесты, тесты, ох как не просты!
Спасибо Дима, приходилось немного писать на работе авто-тесты на Python используя библиотеку Selenium, очень нравилось, жаль что с мобилизацией прикрыли курс. Так вот в целом похоже)
2021г.... Илон по прежнему лишь мечтает.... Redux React по-прежнему актуальны😎
"а потом смотрим, кто это закомментировал, и отрываем ему руки" (с) 😆
Ребята подскажите, может что то я упустила , как фото поставить в Users, когда вставляю фото все превращается в одну фотографию, в каком файле нужно ставить
Увидел Димыча - поставил лайк!!
React-test-renderer , react , redux, jest, тестируем компонент !
Testing component in React: взрыв мозга, у меня тест не прошел, работаю в Visual Code, Visual дебажит внутри везде только не в тестовых файлах. В самом тесте пришлось компонент в create обернуть не видел store. Потом ошибка падала на getInstance, сейчас ошибка падает на expect :))) Вообщем все хорошо, как обычно что то не получается - летим дальше, тесты пока отложил, вернусь к ним в течении недели )
Если ты еще задаешься данным вопросом то оберни свою компоненту в BrowserRouter и Provider и не забудь сделать импорты!
Спасибо
Дима, огромная просьба! Пожалуйста, сними ролик как удалять сообщения. Очень много времени потратил и не получилось ничего сделать. Всем будет очень полезно узнать, как сделать это грамотно. Спасибо!
В итоге сделала с помощью react-testing-library, который уже был установлен в приложении и тестировала не классовый компонент, а функциональный компонент с хуками)
у меня в App.test.js был такой код , и вызвало ошибки
test('renders learn react link', () => {
const { getByText } = render();
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
долго мучился, потом сделал как в видео заработало, видать версия react другая и там логика поменялось
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(, div);
ReactDOM.unmountComponentAtNode(div);
});
У тебя первый тест не работал, потому что он в искал ссылку с текстом 'learn react'.. Мы её удалили в самом начале. И так как не было этого текста, то он ничего и не находил -> ошибка
React jest тесты проходятся и на typescript тоже, но приходится ставить @ts-ignore перед expect(instance.state.status) и instance.deactivateEditMode().
Без связи, вам не хватает скорее всего типизации для jest.
@types/jest проинсталлируйте.
Так же, вы должны передать тип инстанс, если вы хотите так ей пользоваться. Описать интерфейс типа.
Но лучше посмотрите, как использовать jest более эффективно, через spyOn, в этом случае.
А лучше всего возьмите отдельный курс по тестированию, это сразу вас о делит от всех других джуниоров на те же вакансии.
@ts-ignore это никогда не выход. Ну практически. Тогда вообще не стоит писать с типами.
@@MugivaraLuffy спасибо)
Сегодня 19.11.21г Очень понравился урок по тестированию реакта!
тестируем компоненты, тесты, react-test-renderer - React JS
блин, чтобы увидеть полезные коменты, теперь надо рыться среди всех этих seoшных комментов! остановитесь епта
помогаем Димычу!!! А вы лайком подняли нужную инфу?
угу надо спасибо писать под 1 комментом автора, а остальные комменты должны по делу чисто
кстати, да))))
@@indigosay8272 ты думаешь эти комменты бесполезные великие умы современности пишут? Димыч же еще вначале курса сказал, "у меня могут обучаться домохозяйки". Вот кто эти люди
согласен, и у всех все идеально работает нихера не ломается...
Длинное видео, но полезное и интересное!
react-test-renderer mock, react test app redux, летим в космос
Когда у вас тест проходит "pass" но вылетает ошибка "wrapped into act(...):" используйте import {act} from "@testing-library/react"; и оберните код в act(() => { code.. })
Димыч спасибо ! TDD React Jest ❤
тестируем компоненты, тесты, react-test-renderer