Pull to refresh
0
0
Александр Мунько @Seasle

User

Send message

React: тестируем компоненты с помощью Jest и Testing Library

Reading time14 min
Views34K


Привет, друзья!


В данном туториале я покажу вам, как тестировать компоненты на React с помощью Jest и Testing Library.


Список основных задач, которые мы решим на протяжении туториала:


  1. Создание шаблона React-приложения с помощью Vite.
  2. Создание компонента для получения приветствия от сервера.
  3. Установка и настройка Jest.
  4. Установка и настройка Testing Library.
  5. Тестирование компонента с помощью Testing Library:
    1. Используя стандартные возможности.
    2. С помощью кастомного рендера.
    3. С помощью кастомных запросов.
  6. Тестирование компонента с помощью снимков Jest.

Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 5: ↑5 and ↓0+5
Comments2

JSX: как разделять логику и отрисовку в разметке, сгенерированной методом map

Level of difficultyEasy
Reading time3 min
Views7.7K

Давайте представим себе частый кейс - вы с бека получаете какой-то массив данных, из которых вы будете делать разметку, что будет содержимым вашей страницы.

Для примера возьмем список пользователей, и вам надо отрендерить этот список. Вам пришел массив и вы, не теряя времени, прогоняете его через map, создавая, таким образом свою разметку - вот так:

Читать далее
Total votes 4: ↑4 and ↓0+4
Comments26

Scrum ужасен

Level of difficultyEasy
Reading time8 min
Views45K

Если вы читаете этот пост, то, вероятно, работали по какой-то разновидности Scrum, но если нет, присаживайтесь и будьте моим гостем.

Давайте начнём с самого начала.

Что такое Scrum?


Scrum — это Agile-система управления проектами, «помогающая людям и командам инкрементно и совместно приносить пользу» — цитата со Scrum.org.

Что касается Agile, то если вы никогда не читали его манифеста (2001 год), то определю его как компактный список рекомендаций, которым нужно следовать при разработке ПО.

Agile не является: Библией разработки ПО, догматическим набором строгих правил, тикетами Jira или коучами Agile, суетящимися в вашей компании.

Дополнение: определения несовершенны по определению (а теперь прочитайте это ещё раз).

Я с открытой душой приму любую критику о своих определениях Scrum, Agile и любых других терминов, и лишь попрошу прочитать пост целиком, прежде чем писать разгневанные комментарии!
Читать дальше →
Total votes 63: ↑53 and ↓10+59
Comments135

Создание внутреннего пакета компонентов React — проще, чем кажется

Reading time14 min
Views4.8K

В разработке современных React-приложений часто возникает потребность в повторном использовании компонентов. Есть разные способы решения такой задачи, и одним из них является создание внутреннего пакета компонентов. Грамотная сборка и поддержка такого пакета позволяют повысить эффективность и производительность разработки, а команда получает возможность использовать готовые компоненты в различных проектах без особых усилий. 

Я frontend-разработчик SimbirSoft Эллина, и в этой статье расскажу, как создать внутренний пакет компонентов в React с помощью инструмента сборки Rollup, а также как сделать его более качественным и удобным для использования. Материал будет полезен frontend-разработчикам уровней junior+ и middle.

Читать далее ?
Total votes 3: ↑2 and ↓1+2
Comments2

React Fiber & Concurrency Part 2 (2)

Level of difficultyEasy
Reading time8 min
Views5.1K

Данная статья посвящена реализации не блокирующего рендеринга - Concurrent React. Мы рассмотрим то, как работают под капотом Concurrent Features добавленные в 18 версии React. На основе теоретических знаний разберем результат профилирования тренировочного приложения и наглядно увидим, как Concurrent Features разбивают рендеринг приложения.

В статье также приложено множество ссылок на исходники React, чтобы вы могли самостоятельно погрузится в эту тему.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments0

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Level of difficultyMedium
Reading time14 min
Views13K

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума. 

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments1

Как React 18 улучшает производительность приложения

Level of difficultyMedium
Reading time11 min
Views11K


React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.


Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.

Читать дальше →
Total votes 5: ↑4 and ↓1+6
Comments7

KeyDB и Redis: в поисках серебряной пули — in-memory replicated DB (Replicated IMDB)

Level of difficultyMedium
Reading time19 min
Views13K

На кластерах клиентов, которые мы обслуживаем, есть как «одноголовые» инсталляции Redis (обычно для кэшей, которые не страшно потерять), так и более отказоустойчивые решения — Redis Sentinel или Redis Cluster. По нашему опыту, во всех трех вариантах можно безболезненно переключиться с Redis на KeyDB и получить прирост производительности. Точнее, избавиться от бутылочного горлышка Redis в одно ядро. Хотя в новых версиях Redis(r) появилась обработка I/O в отдельных тредах, иногда этого бывает недостаточно.

В то же время, если мы хотим использовать отказоустойчивые решениями вроде Sentinel и Cluster, нам понадобится поддержка этих технологий на уровне библиотеки, которую приложение использует для подключения в Redis. Причем лишь немногие библиотеки умеют читать из реплик Redis — в обоих вариантах (Sentinel и Cluster) чтение, как правило, происходит с мастеров. И запись, естественно, тоже происходит в мастеры. 

В итоге у нас есть несколько реплик довольно дорогого in-memory-хранилища, а в рабочем процессе используется только часть из них. Остальные — на подхвате. Хотя в большинстве кейсов операции с in-memory NoSQL DB — это именно операции чтения.

Однако если посмотреть в сторону KeyDB, то можно увидеть, что там есть киллер-фича — и даже две: я говорю о режимах Active Replica и Multi-Master. Использование этих режимов позволяет получить распределенный отказоустойчивый KeyDB, совместимый с Redis, писать в любую ноду, читать из любой ноды. И все это с точки зрения приложения выглядит как один экземпляр Redis без всяких Sentinel — то есть в коде приложения ничего менять не придется. 

Звучит как фантастика?

Читать далее
Total votes 40: ↑40 and ↓0+40
Comments21

Крушение Intel продолжается

Level of difficultyEasy
Reading time13 min
Views86K
В 2020 году только ленивый не пинал компанию Intel за то, что Apple в итоге отказалась от их услуг и начала разработку собственного процессора M1. Тогда это называли крушением компании — и вполне обоснованно.

Но теперь, спустя три года, можно с уверенностью сказать: американский технологический гигант не достиг дна с уходом Apple, а только продолжает исследовать глубины собственного падения. Ведь из статуса гегемона, компании, которая определяет вектор технологического развития человечества, Intel превратилась в компанию-производителя, которая с трудом отбивается от конкурентов, теряет рынки и направления, а в сферах, что стали центральными — вовсе имеет роль догоняющего. Но в какой момент что-то пошло не так? И что сгубило гордого американского гиганта, который насаждал свою волю и видение будущего на протяжении двух десятилетий?

Читать дальше →
Total votes 121: ↑110 and ↓11+133
Comments352

Почему десктопные приложения работают на веб-платформе?

Level of difficultyMedium
Reading time8 min
Views36K

Где мы свернули не туда? Как получилось, что современный десктопный GUI по умолчанию использует платформу HTML/CSS/JavaScript, которая изначально не предназначена для нативной работы на десктопе? Она создана конкретно для браузера и веба. Зачем из нативного софта делать веб-страницы в браузерной оболочке?

Джефф Этвуд (автор Stack Overflow) предсказал этот феномен ещё в 2007 году. Он тогда сформулировал так называемый закон Этвуда:

Любое приложение, которое можно написать на JavaScript, будет в итоге написано на JavaScript.

Так и вышло.
Читать дальше →
Total votes 86: ↑72 and ↓14+79
Comments261

Как ускорить работу PostgreSQL

Reading time10 min
Views23K

В статье рассказываем, как оптимизировать базу данных PostgreSQL на примере Linux на IBM Z. Опираясь на представленные примеры, вы шаг за шагом узнаете, какие опции и параметры конфигурации улучшат установку PostgreSQL с точки зрения:

Читать далее
Total votes 16: ↑15 and ↓1+17
Comments9

Зачем они выгорают?

Reading time6 min
Views47K

Я сколько лет на заводе козловой кран вожу, ни разу не выгорел! А эти, прям неженки! 

Знакомо?

Выгорание айтишников – это уже притча во языцах. Если в своей среде IT-специалисты еще находят понимание, то во вне они сталкиваются с диким отрицанием.

Ишь какие, депрессия у него! Работать не может! Дури вам в голову напихали, вот и оправдываете свою лень!

За свои скромные семь лет на руководящей позиции мне довелось управлять разными людьми. Был опыт тимлидства над командой разработчиков. Не претендую на истину и уж тем более на какое-то серьезное научное исследование. Но все же хочу систематизировать свои наблюдения и сделать цикл статей «команда глазами начальника».

Ну-ка, ну-ка???
Total votes 87: ↑75 and ↓12+86
Comments182

Нельзя просто так взять и распарсить этот JSON на JavaScript

Reading time7 min
Views27K

JSON является одним из очень простых, но в то же время эффективных языков для хранения и передачи данных. Он настолько популярен, что, пожалуй, может считаться самым совместимым форматом представления данных в мире.

Одновременно с этим, JavaScript является одним из наиболее популярных языков программирования и применяется практически везде. Также, нужно понимать, что JSON появился напрямую из JavaScript и эти два языка просто созданы друг для друга.

Но что же может пойти не так, спросите Вы? Просто попробуйте распарсить этот JSON-документ…

Давайте парсить
Total votes 68: ↑63 and ↓5+65
Comments60

Интернет-цензура и обход блокировок: не время расслабляться

Reading time10 min
Views171K

Disclaimer: практически всё описанное в статье, не является чем-то принципиально новым или инновационным - оно давно известно и придумано, используется в разных странах мира, реализовано в коде и описано в научных и технических публикациях, поэтому никакого ящика Пандоры я не открываю.

Нередко на Хабре в темах, посвященных блокировкам ресурсов встречаются забавные заявления, вида "Я настроил TLS-VPN, теперь будут смотреть что хочу и цензоры мой VPN не заблокируют", "Я использую SSH туннель, значит все ок, не забанят же они SSH целиком", и подобное. Что ж, давайте проанализируем опыт других стран и подумаем, как же оно может быть на самом деле.

Читать далее
Total votes 258: ↑253 and ↓5+318
Comments519

Прогнозирование временных рядов на JS: анализ данных для самых маленьких фронтендеров

Reading time3 min
Views8.6K

Как предсказывать временные ряды на JavaScript, зачем нам понадобилось это делать в браузере и когда это имеет смысл.

Читать далее
Total votes 2: ↑2 and ↓0+2
Comments3

Чёрная магия трансформов, или об оптимизации анимаций на CSS

Reading time4 min
Views10K

Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨

Читать далее
Total votes 11: ↑11 and ↓0+11
Comments3

React tips for faster development at scale

Reading time6 min
Views5K

Впервые я познакомился с React в 2015 году и вот уже использую его можно сказать повседневно 7 лет. Бесчисленное количество компонентов было написано за это время, React из подающей надежды модной технологии вырос в серьезную библиотеку и по сути стал стандартом для написания веб приложений в 2022 году.


Мы полюбили эту библиотеку за простое и лаконичное, но в тоже время очень мощное API, производительность, крутейшее коммюнити, наличия множество npm пакетов и просто за возможность решать прикладные задачи быстро и легко.



Скриншот официального сайта https://reactjs.org

Читать дальше →
Total votes 5: ↑5 and ↓0+5
Comments4

Как мы переходили на React-router v6: подводные камни и альтернативы

Reading time8 min
Views19K

Мы перешли на шестую версии React-router. Это помогло нам решить несколько проблем, например, определение маршрутов в Switch рендерит точный маршрут, а не первое совпадение, а размер бандла уменьшился в 2 раза.  

В статье расскажем про опыт миграции и подготовительный этап, трудности, возникшие после миграции и ошибки, информации о которых нет в официальной документации, и пути их обхода. Также будет альтернативный способ перехода с помощью официального пакета.

Читать далее
Total votes 18: ↑18 and ↓0+18
Comments13

Ультимативный список инструментов для разработчиков и опытных пользователей для Windows

Reading time6 min
Views73K
Можете ли вы поверить, что с момента моего последнего списка инструментов прошло 6 лет? Инструменты изменились, многие из них доступны онлайн, но, честно говоря, для составления нового списка инструментов требуется ОЧЕНЬ МНОГО РАБОТЫ. Но я смог, вот список на 2020-2021 годы. Это инструменты в моей папке Utils. Я создал папку d:\dropbox\utils и добавил ее в свой PATH. Таким образом, он будет на всех моих компьютерах, и я могу мгновенно добраться до любого из них.

Это обновленный до версии 2020-21 мой список 2003, 2005, 2006, 2007, 2009, 2011 и 2014 годов, который в настоящее время включает все остальные мои списки. Я занимаюсь этим более 17 лет. Вау. Думаю, стоит тратить на это больше времени.

Все собирают утилиты, и у большинства есть список из тех, которые, по их мнению, незаменимы. Вот мой. У всех есть свои задачи, и я, скорее всего, использую каждую хотя бы несколько раз в неделю. Для меня «утилита» означает утилитарность. По этому принципу и построен список.

Все это очень любимые и часто используемые утилиты. Я бы не рекомендовал их, если бы не использовал их постоянно. Никто не платил деньги за то, чтобы быть в этом списке.

Эту статью написал наш коллега Скотт. Вот версия на английском. Ну а сам список под катом.

Читать дальше →
Total votes 50: ↑43 and ↓7+49
Comments164

Заметка о Mapped Types и других полезных возможностях современного TypeScript

Reading time9 min
Views18K


Привет, друзья!


Представляю вашему вниманию перевод 2 статей:


Читать дальше →
Total votes 22: ↑22 and ↓0+22
Comments3

Information

Rating
6,299-th
Location
Новосибирск, Новосибирская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer
Senior