Anubis
@Anubis
Люблю корейскую кухню и веб-разработку

Как тестировать бандлы, собранные через Webpack?

Доброго времени суток! В эти новогодние выходные осваиваю ряд новых для себя технологий и в числе прочих хочу прикрутить тестирование кода.

Сперва о структуре проекта.

Сервер на Node.js, веб-запросы к API и серверный рендеринг React-страниц обслуживает Koa. Выдачей статических файлов и перенаправлением для серверного рендеринга заведует Nginx. Клиент на основе React & Redux.

До текущего момента среду разработки смог настроить очень удобно. Использую webpack-web-server для горячей перезагрузки отредактированных клиентских компонентов. Так как некоторые страницы рендерятся на сервере, то серверный код тоже использует JSX и собирается в бандл с помощью Webpack, используя --watch для немедленной пересборки при внесении изменений в код. Запущенный сервер тут же перезапускается с помощью nodemon.

{
    "client-dev": "NODE_ENV=development webpack-dev-server --config tools/webpack/webpack.client.config.js",

    "preclient-build": "npm run clean:client",
    "client-build": "NODE_ENV=production webpack --config tools/webpack/webpack.client.config.js -p --progress",

    "preserver-dev": "npm run clean:server",
    "server-dev": "npm-run-all --parallel server-dev:build-and-watch server-dev:run",
    "server-dev:build-and-watch": "NODE_ENV=development webpack --config tools/webpack/webpack.server.config.js --watch",
    "server-dev:run": "NODE_ENV=development nodemon server-dst/bundle.js --watch server-dst",

    "preserver-build": "npm run clean:server",
    "server-build": "NODE_ENV=production webpack --config tools/webpack/webpack.server.config.js -p --progress",

    "clean": "npm-run-all --parallel clean:client clean:server",
    "clean:client": "rimraf ./client-dst/*",
    "clean:server": "rimraf ./server-dst/*"
  }


Казалось бы, кайф да идиллия! Не хватает только покрытия кода тестами.

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

Опыта использования тестировочных фреймворков не имею и буду признателен за любые советы, подсказки и ссылки.
  • Вопрос задан
  • 755 просмотров
Пригласить эксперта
Ответы на вопрос 2
Относительно недавно Google выделили ядро Chrome Headless, и стало возможным запускать тесты e2e без поднятия иксов (открытия браузера/ Selenium и тп) Отдельный проект для управления Puppeteer https://github.com/GoogleChrome/puppeteer

Интеграция Puppeteer и Jest
https://github.com/xfumihiro/jest-puppeteer-example
https://habrahabr.ru/company/ruvds/blog/342578/
Ответ написан
Комментировать
alexiusp
@alexiusp
senior frontend developer
Как верно указано выше, юнит-тестирование (основной источник метрики "покрытие") проводят до сборки бандла. Для реакта лучше всего подходит Jest от тех же разработчиков. Jest умеет генерировать отчёты о покрытии самостоятельно, дополнительных инструментов для этого устанавливать не нужно.

Лучше всего вам будет обратиться к одному из готовых starter-pack, в которых вся система сборки (в вашем случае webpack), и тестирования уже настроена и готова к использованию, и посмотреть как там это сделано.

После сборки выполняются e2e тесты, для этого используются инструменты, вроде указанных выше Puppeteer, Protractor, или ещё можно добавить сюда Selenium и Nightwatch.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы