fullstack react tdd example

Реакция, управляемая компонентами, и тестирование DOM MonorePo

Добро пожаловать в разработку DEACT, управляемое компонентами и тестирование DOM Monorepo! Этот репозиторий содержит все код и примеры для комплексного разговора о приложениях для построения реагирования с использованием тестового разработки (TDD) и DOM Testing. Вот ссылка на сам разговор. Monorepo был организован с использованием PNPM и TurborePo для оптимизации управления пакетами и процессами сборки.

Если вы не знакомы с концепцией монорепо, это единственный репозиторий, который содержит несколько проектов. В этом случае Monorepo содержит общую библиотеку пользовательского интерфейса и пару приложений React. Общая библиотека пользовательского интерфейса содержит многоразовые и доступные компоненты React, а также их тесты и истории. Приложение React демонстрирует использование компонентов и интеграцию. Приложение Next.js демонстрирует силу композиции в реагировании с модальным компонентом библиотеки Mantine UI.

Вы можете прочитать больше о Monorepos здесь.

Обзор

Основная цель этого MonorePo - продемонстрировать лучшие практики для создания многоразовых и доступных компонентов React, а также того, как эффективно проверить их с использованием таких инструментов, как библиотека реагирования и сборник рассказов. Кроме того, он демонстрирует использование Mock Service Worker для обработки внешних зависимостей в тестах и иллюстрирует образец бэкэнд-фондации (BFF) в действии. Выступление предназначено для аудитории с сочетанием фронтального и среднего опыта, подчеркивая силу композиции в React и то, как она применяется как к разработке компонентов, так и к тестированию.

В конечном счете, мы видим, как мы можем создать и проверить этот интерфейс:

Содержимое

Monorepo структурирован следующим образом:

Приложения

• frontend : приложение React, созданное с использованием приложения Create React для демонстрации использования и интеграции компонентов.
• mantine-example : приложение Next.js, демонстрирующее силу композиции в реагировании с модальным компонентом библиотеки библиотеки мантина. Это приложение используется в качестве введения в разговор, подчеркивая преимущества композиции при создании и тестировании компонентов реагирования.

Пакеты

• ui : пример общей библиотеки пользовательского интерфейса, содержащей многократные и доступные компоненты React, а также их тесты и истории.
• types : общая библиотека, содержащая типы типов, используемые другими пакетами.
• mocks : общая библиотека, содержащая макетные данные, используемые другими пакетами.

Начиная

Вам нужно будет установить PNPM во всем мире для запуска MonorePo.

Версия PNPM, используемая при разработке этого монорепо, составляет 8.2.0 , а узла версия 18.16.0 .

У установленного версии Storybook есть проблемы при запуске предыдущих версий узла. Пожалуйста, используйте хотя бы узел версии 18.16.0 .

Чтобы установить зависимости для MonorePo, запустите следующую команду:

pnpm install
pnpm build

MonorePo можно запустить, используя следующие команды:

• pnpm run dev : запускает Monorepo в режиме разработки.
• pnpm run build : строит монорепо для производства.
• pnpm run start : запускает монорепо в производственном режиме.
• pnpm run test : запускает тесты Monorepo.

Чтобы запустить сборник рассказов, запустите следующую команду:

pnpm run storybook

Заводящие тесты

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

Чтобы запустить все тесты, запустите следующую команду:

pnpm run test

Чтобы запустить тесты для конкретного пакета, CD в каталог и запустите следующую команду:

pn test -- --watch

Чтобы запустить тесты приложения, запустите следующую команду:

 cd apps/frontend
pnpm run test -- --watch

Чтобы запустить тесты компонента, запустите следующую команду:

 cd packages/ui
pnpm run test -- --watch

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

Дополнительные заметки

Предлагаемая архитектура API для современной передней части - это бэкэнд для шаблона Frontend:

Вы можете прочитать больше об этом здесь.

ИИ сгенерировали заметки для разговора

Вот краткое изложение и ключевые выводы из презентации:

Резюме: Пол Хаммонд, директор Pack Software, представляет разработку, управляемую компонентами, с тестированием React и DOM, охватывая такие темы, как разработка тестирования, доступность и современные методы фронта.

Идеи:

• Разработка, управляемая компонентами
• Тестирование против поведения, а не детали реализации обеспечивает большую ценность
• Доступность должна быть ключевым фактором при строительстве компонентов
• Такие инструменты, как сборник рассказов, позволяют интерактивную разработку и документацию компонентов
• Mock Service Worker позволяет издеваться над API для тестирования и разработки
• Бэкэнд для шаблона Frontend (BFF) может упростить архитектуру передней части
• Хорошие тесты придают уверенность в том, чтобы вносить изменения со временем
• Библиотека реагирования тестирования поощряет тестирование с точки зрения пользователя
• TDD может привести к более обслуживаемому и гибкому коду
• Компоненты компонентов позволяют облегчить настройку и повторное использование

Понимание:

• Поведение тестирования вместо реализации позволяет облегчить рефакторинг и обслуживание
• Доступные селекторы в тестах могут улучшить общую доступность приложения
• Исследователи компонентов, такие как сборники рассказов, облегчают сотрудничество между дизайнерами и разработчиками
• Намекнув на уровне сети позволяет последовать макет между тестами и разработкой
• TDD может привести к более быстрым петлям обратной связи и более высокой уверенности в изменениях кода
• Сосредоточение внимания на результатах доставки может помочь убедить команды принять практики TDD
• Использование DOM для тестирования тщательно имитирует реальные взаимодействия пользователей
• Отделение проблем пользовательского интерфейса от бизнес -логики улучшает общую архитектуру приложений
• Непрерывные методы доставки, такие как «ходячие скелеты», могут улучшить настройку проекта
• Балансирующие модульные тесты с тестами интеграции/E2E охватывают различные сценарии тестирования

КАВЫЧКИ:

• «Цель хороших тестов состоит в том, чтобы дать нам уверенность в том, чтобы вносить изменения с течением времени».
• «Если тесты проходят, мы должны чувствовать себя достаточно уверенно, чтобы идти прямо к производству».
• «Современные передние концы построены с компонентами, а не страницами».
• «Разработка, управляемая компонентами, помогает нам создавать многоразовые компоненты, которые уменьшают дублирование».
• «Мы хотим увидеть, как мы вносим изменения со временем, как тесты помогают нам вносить изменения со временем».
• «Хорошие тесты должны дать нам уверенность в том, чтобы вносить изменения с течением времени».
• «Радость TDD - это правильный способ выразить это, потому что это такой освобождающий опыт».
• «Я не работал поздно 10 лет, и потому что мне не нужно, и вам не нужно, если вы напишите в стиле теста».
• «Когда дело доходит до тестирования, одна из вещей, которые я обычно делаю, это ... я бы потянул чью -то ветвь, запустил тесты, сознательно что -то провалил и увидел тесты».
• «Мне нужно иметь уверенность в том, как это работает».

ПРИВЫЧКИ:

• Записать тесты перед кодом реализации, чтобы обеспечить правильное покрытие теста
• Используйте доступные селекторы в тестах, чтобы улучшить общую доступность
• Тесно сотрудничать с дизайнерами, используя такие инструменты, как сборник рассказов
• Рефактор уверенно с сильным набором тестов на месте
• Запустите тесты в режиме наблюдения для мгновенной обратной связи во время разработки
• Используйте фиктивные работники обслуживания для моделирования ответов API в тестах
• Построить ходячие скелеты для создания трубопроводов CI/CD на ранних этапах проектов
• Просмотреть запросы на привлечение путем преднамеренного нарушения кода для проверки тестового покрытия
• Расположение приоритетов в тестировании по сравнению с подробностями реализации в тестах передних конечных
• Непрерывно изучать и применять передовые практики в фронтальной разработке

Факты:

• Библиотека реагирования тестирования строится на вершине библиотеки тестирования DOM
• Jest использует представление DOM в памяти, называемое JSDOM для тестирования
• Mock Service Worker может перехватывать и издеваться над вызовами API на уровне сети
• Сборник рассказов - это инструмент для разработки компонентов пользовательского интерфейса в изоляции
• Доступность поражает 30-40% населения в той или иной форме
• Развитие, управляемое компонентами, является рамки-агентом и применяется для реагирования, VUE, Angular и т. Д.
• Разработка на основе тестирования может привести к меньшему количеству ошибок и более поддерживаемому коду
• Бэкэнд для шаблона Frontend может улучшить производительность фронта и упростить архитектуру
• Cypress и Playwright-это инструменты для сквозного тестирования веб-приложений
• Тестирование на мутации может использоваться для проверки качества испытательных комплексов

Ссылки:

• Реагировать библиотеку тестирования
• Сборник рассказов
• Мик обслуживающий работник
• Шутка
• Кипарис
• Драматург
• Redux Toolkit
• Реагировать запрос
• Тестирование JavaScript (Кент С. Доддс)
• Инициатива по доступности W3C (WAI)
• Разговор Яна Купера "TDD: Куда все это пошло не так"
• Github Primer (библиотека компонентов пользовательского интерфейса)
• Тестирование библиотечной игр
• Бэкэнд для шаблона Frontend (BFF)

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

Рекомендации:

• Принять разработку, управляемую компонентами, для улучшения возможностей повторного использования и последовательности в приложениях
• Используйте сборник рассказов или аналогичных инструментов для разработки и документирования компонентов пользовательского интерфейса
• Реализовать методы разработки тестирования для кода фронта
• Сосредоточьтесь на тестировании поведения, а не на деталях реализации для более устойчивых тестов
• Используйте Mock Service Worker для последовательного издевательства API в тестах и разработке
• Рассмотрите возможность реализации бэкэнд для шаблона Frontend, чтобы упростить архитектуру фронта
• Распределите приоритет доступности в разработке компонентов и тестировании с самого начала
• Используйте доступные селекторы библиотеки React Testing для улучшения общей доступности приложений
• Внедрять непрерывную интеграцию и практику доставки в начале проектов
• Балансовые тесты с интеграцией и сквозными тестами для комплексного охвата