Хобрук: Ваш путь к мастерству в программировании

Как использовать webpack для ручного тестирования реагирующих компонентов?

Я знаю, что мы должны использовать модульные тесты для наших компонентов reactjs. . Но что я также хочу, так это какой-то способ вручную тестировать наши компоненты по отдельности. Потому что мы работаем над небольшими спринтами, в которых мы должны предоставить какой-то готовый компонент, прежде чем появится страница, которая впервые использует этот компонент. И я хочу увидеть, что этот полный компонент действительно работает (т.е. тестовая интеграция с css и подкомпонентами).

Итак, для начала я хотел бы, чтобы этот новый компонент отображался на черной странице, которая не требовать этот компонент напрямую, но брать имя/путь этого компонента из параметра строки запроса. Затем я планирую добавить на эту страницу некоторую общую конфигурацию компонента (например, текстовое поле с json, представляющим реквизиты для передачи этому компоненту).

Первая проблема, с которой я столкнулся сейчас, связана с тем, как настроить webpack, webpack-dev-middleware или webpack-dev-server, чтобы иметь возможность загрузить компонент, переданный параметром.

Кто-нибудь знает, как это сделать? Или лучший способ справиться с этим?


  • Хотя мы не используем реактивные компоненты, мы начали разделять наши компоненты по отдельности. Мы намерены начать тестирование наших компонентов. Потребуется еще некоторое время, прежде чем мы получим рабочее решение, но как только оно у нас будет, я буду рад поделиться нашим подходом. 21.01.2015

Ответы:


1

Я бы попробовал что-то вроде этого:

  1. Настройте точку входа, которая использует require.context.
  2. Вызовите require в этом контексте на основе вашей строки запроса. Теперь у вас должен быть компонент React. Визуализируйте это через React.

Чтобы сгенерировать элементы управления тестом, я бы включил метаданные в компонент, используя схему JSON. Затем элементы управления формы можно сгенерировать с помощью некоторого генератора форм, такого как plexus-form или tcomb-form.

22.04.2015
Новые материалы

Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

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

Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..

React Hooks: основы деструктуризации массива
Kent C. Dodds написал классный пост о том, как грядущая функция React под названием Hooks работает на капоте. Предстоящий хук React useState основан на деструктурировании массива, давайте..

Пакеты R, используемые в Tesla
Добро пожаловать обратно! R — очень популярный язык программирования, используемый множеством компаний, включая Tesla! Итак, давайте взглянем на некоторые пакеты R, которые использует Tesla...

Сокращение и слияние токенов для эффективных моделей VL: обзор
Часто в задачах, связанных с компьютерным зрением и НЛП, вычислительно затратная и требующая большого объема памяти обработка становится препятствием для более быстрого логического вывода модели, а..