🅅aleriy
обычные тест либы типа cypress предлагают искать элементы по стилям, XPath, css-selector-ам, а эти предлагают искать так как видит страницу конечный пользователь
🅅aleriy
Раз тут речь зашла про тестирование. Может есть какая то _хорошая_ статья про организацию тестирования (Testing Pyramid) для Реакта ? Есть Jest, Enzyme, React-testing-library и еще разные тулы. Как это все соотносится и как можно организовать ?
jest фрэймворк для тестирования с набором матчеров для сравнения enzyme либа для тестирования реакт компонентов, с возможностью рендерить их в json и свое собственное упрощенное представление для дальнейшего анализа и имитации срабатывания событий react-testing-library - наиболее верный путь для тестирования реакт компонентов :)
🅅aleriy
так что jest + react-testing-library
Yury
@ValeryKobzar , а есть какой-нить пример, где адекватно реализовано тестирование? чтобы понять ЧТО надо тестировать и КАК ?
🅅aleriy
@ValeryKobzar , а есть какой-нить пример, где адекватно реализовано тестирование? чтобы понять ЧТО надо тестировать и КАК ?
тесты надо писать так, чтобы при изменении компонента не пришлось их сильно переписывать
🅅aleriy
примеров по ключевым словам react-test-library полно
Yury
сча гляну r-t-l, пробовал на jest чисто делать и понял, что слишком дроблю тест, проверяя то, что не надо будто бы
Yury
спс
🅅aleriy
сча гляну r-t-l, пробовал на jest чисто делать и понял, что слишком дроблю тест, проверяя то, что не надо будто бы
тестировать надо то что указано в требованиях к компоненту или к странице
🅅aleriy
https://medium.com/flatiron-labs/creating-readable-tests-using-react-testing-library-2bd03c49c284
Саша
Привет, никто не знает почему context.consumer может терять контекст?
Тимофей 🛴
Привет, никто не знает почему context.consumer может терять контекст?
воспроизведи в codesandbox, скорее всего какая то простая ошибка
Саша
Сложна = ) Ладно, попробую
Alexey
День добрый, предположим есть состояние которое меняется в зависимости от клика на элемент. Какими средствами можно сделать слежку за изменением состояния и последующим запуском функции на случай изменения определенного значения, желательно хуком. Спасибо
Alexey
Либо куда копать, туплю
Саша
В провайдер обернуто выше по дереву?
В ThemeProvider контекст есть, а в makeStyle контекст уже потерян
Andrey
ой неужели https://nextjs.org/blog/next-9#dynamic-route-segments
Alexey
Спасибо ребят, буду копать
Alexey
Ну у меня частенько в процессе изучения так, думаю я не одинок. Вокруг 2 деревьев брожу
🅅aleriy
День добрый, предположим есть состояние которое меняется в зависимости от клика на элемент. Какими средствами можно сделать слежку за изменением состояния и последующим запуском функции на случай изменения определенного значения, желательно хуком. Спасибо
"есть состояние которое меняется в зависимости от клика на элемент" "Какими средствами можно сделать слежку за изменением состояния?" "последующим запуском функции на случай изменения определенного значения" делаешь колбэк, который вызывается по клику внутри сравниваешь нужные значения и вызываешь нужную функцию
🦜
useEffect и второй аргумент в массиве
🦜
ну ты как-то усложнил все
🅅aleriy
зачем делать эффект там где он не нужен?
🅅aleriy
у него есть кнопка по клику на которую нужно сравнить что-то и сделать вызов функции
🅅aleriy
на фига городить огороды с эффектами тут?
Alexey
В любом случае спасибо за разные варианты, всё намотаю на ус
🅅aleriy
🦜
в момент изменение пропса, стейта
🅅aleriy
а если это не пропс?
🅅aleriy
и не стейт
Andrey
А что там, если вкратце?
теперь можно роутинг с параметрами
🅅aleriy
и зачем ждать пока это нечто прокинется снова если есть четко понятная точка изменения
Andrey
user/:userid:
artalar
👌
Andrey
👌
а то все же как-то тупо было, что нужно было "костылить", хотя в том же nuxt это давно есть, и в sapper
🦜
а если это не пропс?
то ты делаешь что-то не так
🅅aleriy
так он хотел же следить за изменением - сайд-эффект
он просто вопрос не правильно задал :))
Andrey
он просто вопрос не правильно задал :))
ну тут как грится - мои полномочия - всё)
🅅aleriy
зачем следить за изменениями, которые ты точно знаешь где генерятся? :)
🅅aleriy
одно дело когда эти изменения прилетают сайд-эффектом
🅅aleriy
другое дело когда у тебя onClick эвент их триггерит
Andrey
зачем следить за изменениями, которые ты точно знаешь где генерятся? :)
ну типа поменял что-нибудь в стейте, захотел тост показать императивно
🅅aleriy
ну типа поменял что-нибудь в стейте, захотел тост показать императивно
т.е. ты меняешь в компоненте его стейт и хочешь следить за этими изменениями через эффект? :)
Andrey
т.е. ты меняешь в компоненте его стейт и хочешь следить за этими изменениями через эффект? :)
бывают кейсы) мы ж не знаем, чего там у человека (но в целом, да, я бы так и сделал) ((особенно, если не один фактор воздействует на стейт, не припиливать же сайд эффект к каждому хендлеру))
🅅aleriy
Почему нет? Постобработка введённых данных
постобработка введенных данных с какой целью?
🅅aleriy
можно примерчик?
🅅aleriy
ну то есть я могу понять например, что ввели данные, провалидировали их и засунули в стейт далее в эффекте заметили эти изменения и к примеру сделали запрос на сервер
🅅aleriy
но вот формулировка "постобработка введенных данных" как то странно для меня звучит
MⅨ
Как мне закинуть проп в функциональном компоненте
🅅aleriy
Как мне закинуть проп в функциональном компоненте
на чтевертом месте будешь в топчике сегодняшних вопросов :)
MⅨ
const ProjectListContainer: React.FC<Response> = ({ projects }) => { } interface Response { projects: Project[] }
Alexey
Всем привет. Можем ли мы без SSR отдавать метатеги основанные на данных приходящий с сервера ? (это необходимо для шаринга ссылки в социальных сетях) Пробовал Helmet но он подменяет метатеги после того как загрузился скрипт, и отработал. Есть идеи как можно реализовать, или только SSR ?
🅅aleriy
const ProjectListContainer: React.FC<Response> = ({ projects }) => { } interface Response { projects: Project[] }
пропсы прокидывают, а не закидывают :)) <ProjectListContainer projects={projects} />
Andrey
const ProjectListContainer: React.FC<Response> = ({ projects }) => { } interface Response { projects: Project[] }
type Props = { projects: Project[]; } const ProjectListContainer = ({projects}: Props) => ...
Nikolai
постобработка введенных данных с какой целью?
Например пользователь кинул в инпут URL картинки и нужно с дебаунсом лениво загрузить её превью. Вы это в обработчике будете делать?
🅅aleriy
Например пользователь кинул в инпут URL картинки и нужно с дебаунсом лениво загрузить её превью. Вы это в обработчике будете делать?
я вызову эффект по нажатию на кнопку Загрузить, который тригернет обращение к серверу, загрузит картинку и изменит либо локальный стейт компонента, либо стейт родителя, который в виде пропса прокинется куда надо и отрисуется картинка
🅅aleriy
но никакого useEffect мне тут не понадобится это уж точно
Nikolai
Кнопки нет, есть инпут только)
🅅aleriy
Кнопки нет, есть инпут только)
ну видимо будем ждать нажатия enter да? :))
Nikolai
Вот как в чатике превью ссылки грузится по вводу
🅅aleriy
т.е. ломиться по несуществующим ссылкам по дебаунсу?
Andrey
т.е. ломиться по несуществующим ссылкам по дебаунсу?
ну если то - часть бизнес логики) еще кейс сфетчить из инпута выпадающее меню вариантов, когда на ходу печатаешь
🅅aleriy
а что для ссылок придумали валидацию? :))0
Nikolai
А в стейте - состояние инпута
Andrey
в общем, хочет человек следить за изменениями стейта, ему верно указали на useEffect) другое дело, что это бизнес логика в слое компонентов, и хорошо это или плохо, и почему плохо - уже другой вопрос)
🅅aleriy
когда ты выполняешь что-то внутри handleClick по событию onClick это очевидно