Введение
Вторая часть моей продолжающейся серии статей о том, как использовать более современный подход к тестированию приложения React. В прошлый раз я рассмотрел инструменты, которые предпочитаю использовать. 🔨
- Cypress для сквозного тестирования
- Vitest для модульного тестирования
- MSW за насмешку над нашими сервисами
В этом посте я расскажу, как все установить, прежде чем приступить к тестированию.
Когда вы только начинаете тестировать, это может быть немного пугающе из-за множества источников, утверждающих, что это идеальный способ тестирования и какие пакеты или фреймворки лучше всего использовать. Но чтобы оценить фреймворки тестирования, важно увидеть их в действии в приложении.
Я надеюсь дать очень самоуверенный взгляд на то, как тестировать, чтобы избежать паралича принятия решений и просто перейти к тестированию!
Настройка приложения React для тестирования
Я пошел дальше и создал простое приложение для тестирования. Вы можете найти это здесь. Это фиксация его начального состояния прямо здесь.
Это простое приложение для реагирования на основе Vite, которое загружает сообщения с https://jsonplaceholder.typicode.com/posts при нажатии кнопки.
Вот как это выглядит:
Просто, чтобы дать очень краткий обзор кода:
У нас есть две функции:
- fetchPosts — вызывает конечную точку и извлекает сообщения с заголовком, телом и идентификатором. Это установлено внутри нашего локального состояния
- clearPosts — сбрасывает локальное состояние в пустой массив.
Затем эти сообщения повторяются и отображаются с помощью функции map.
Почему это приложение?
Получение, преобразование и отображение запроса к API, вероятно, является наиболее распространенной задачей при разработке приложений. Это приложение позволит нам протестировать именно эти вещи.
Со временем мы перейдем к макету службы JSON с помощью MSW. Проведите комплексное визуальное тестирование с помощью Cypress и узнайте, как можно создать тест с их средством запуска тестов. Наконец, с помощью Vitest мы создадим несколько модульных тестов, чтобы получить некоторую уверенность в наших отдельных компонентах и функциях преобразования.
Я старался сделать это как можно проще, чтобы сосредоточиться на том, что важно для нас. Тестирование! 💯
Настройка пакетов тестирования
Это будет простая установка пакета:
Для Витеста:
npm install -D vitestДля кипариса:
npm install -D cypressДля ТБО:
npm install -D mswИли все сразу:
npm install -D vitest cypress mswЗавершение
Вот тот самый репозиторий с обновленным коммитом и всеми корректно установленными пакетами.
Теперь мы, наконец, готовы погрузиться с головой в тонкости библиотек тестирования. В следующий раз я расскажу, как работает Vitest и как использовать его простой синтаксис.
Спасибо за чтение! Если у вас есть еще вопросы, не стесняйтесь обращаться.
Больше контента на Relatable Code
Подключаемся!
Если вам это понравилось, не стесняйтесь связаться со мной в LinkedIn или Twitter.
Ознакомьтесь с моей дорожной картой бесплатного разработчика и еженедельными новостями технологической отрасли в моем рассылках.
Первоначально опубликовано на https://relatablecode.com 25 апреля 2022 г.
Создавайте компонуемые веб-приложения
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы вместе размещать компоненты и совместно работать над ними, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте компонуемые внешние интерфейсы с помощью Design System или Микроинтерфейсы или изучите компонуемые внутренние интерфейсы с серверными компонентами. .
