Mocha + фермент с созданием-реактивным приложением

Автор оригинала: Dave Schinkel.

Но я хочу использовать Mocha!

Почему мокча?

Потому что я использовал Mocha, а Jest это мошенничество Отказ Facebook пытается рынок/рисовать шутку как лучше, чем Mocha, и что как-то мокко претензия уступает или боль. Полный мусор! Они просто хотят, чтобы вы использовали все FB. Я думаю, что это смешно, когда дело доходит до тестовых инструментов. И Create-React-App пытается заблокировать вас только с помощью шума. Это плохо и просто хромает на части FB IMO. Проблема в том, что многие команды используют CRA в производственных приложений.

Можно легко сказать «тогда не использовать CRA», только значит быть «игрушкой» или для начинающих. Но эта линия на 100% полный BS. Почему? потому что ты не можешь не пойти на него, многие команды чувствуют, что это то, что вы должны использовать, конец все Defacto “Все делают это сейчас” Bandwagon. Тогда проблема становится тем фактом, что FB преднамеренно позволяет легко добавлять другие рамки, такие как Mocha. Вы можете использовать Mocha, выполнив несколько главных возобновляемых для скриптов CRA, либо подобное я понял … ниже. Это всегда два простых шага, применяющих любой Тестовая каркас для пользовательского приложения Ract Application:

1) NPM установить -D Mocha 2) просто Добавьте тестовый скрипт в Package.json И вы были сделаны!

Хорошо с CRA, вы не можете просто сделать это Отказ Это не обычай, это самоуверенно, но, конечно, FB не должно делать шаги 1 и 2 для других структур тестирования, которые уже не осуществимы, потому что они хотят, чтобы вы использовали шутку.

Я предпочитаю бегать моча + фермент к единица Тест и Интеграция Проверьте мои приложения Ract Prive.

Кроме того, я практикую Тестовое развитие И мне нравится держать вещи простыми. Это означает, что некоторые тестовые рамки IMO добавляют много неценного блуждания и косвенного помещения, и я часто предпочитаю не использовать издевательства, если это возможно, и в большинстве случаев мне не нужно.

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

Пытался добавить мокко в CRA – провалиться

Команда я работаю с хотела использовать Create-React-App ( вздох ) как можно больше без выбросить и наименее модификации необходимы ( вздох снова). И я хотел почтить свое решение или желание сделать это, пока все еще имею возможность бегать моча Отказ

Однако при попытке настроить моча Я был удивлен, обнаружив, что я не смог просто добавить мокко в Create-React-App То, как я обычно бы ( тьфу !! ). В основном команда Facebook ожидает, что все по умолчанию, чтобы шутить и Wnats вас не использовать другие. Ну, это приятно, и я понимаю, что это самоуверенно, но было удивлено, что это ограничивает, не был вынужден, возможно, извлечь его.

Хорошая вещь, я понял, что я хотел бы поделиться этим работает, и это Не требует, чтобы вы извлекли ваше создание-реактивное приложение !. Когда я бы тоже хотел бы ava Тестовые рамки, которые, я думаю, будут следующими тестовыми рамками, которые я бы использовал, если бы мне пришлось или хотел изменить.

Я думал, что в порядке, мне, вероятно, не нужно вручную установить Babel-Cli (Потому что создание-реактивное приложение не и не нужно иметь возможность ссылаться на Babel-Cli/Babel-Node ) Или просто придется к сожалению добавить Babel-Preset-ES2015 Вручную через файл .babelrc Если я хотел снова забрать Mocha, как в командной строке, так и в тестовом бегуне.

Я узнал Ни один из этих идей не рекомендовал Когда Дэн Абрамов ответил на мою идею установить Babel-CLI или установить Babel-Preset-ES2015 Когда я опубликовал проблему в Github. Он рекомендовал добавить больше магии/конфигурации к части Основные сценарии это запущено create-raction-приложение. Но я не хотел взять себя в кроличье дыру. Хотя я хотел бы помочь и внести свой вклад в добавление поддержки MOCHA, я люблю простые решения в первую очередь, если это возможно. Добавив, что к реагированию не будет тривиальным имо … и У меня нет времени для этого Отказ

Пользовательские реактивные проекты с нуля

Я, честно говоря, не против настраивания и настраивания моих реагированных проектов. До Create-React-App ( Вздох ) Выйдя, я не имел довольно хорошо с моим моча + фермент Тесты. Я также создаю фермент Mocha + Enzyme Интеграция Испытания на основе единицы. Так … я Не использовать Чрезвычайные снимки Для интеграционных тестов. И снимки не единица Испытания .. Они не изолируют поведение или государственные проблемы. Я не люблю их вообще, и предпочитаю оставаться далеко, далеко от всего, что я работаю.

Для тестов интеграции я просто создаю два вида:

моча + Супертест – Для тестирования по сети моча + Фермент (погружение, гора) – Для тестирования более чем одного уровня дерева компонентов APP My React App вместо магия

Когда я проверяю свой код, я создаю Изолированные единицы Тесты с использованием: моча + фермент (неглубокий) Эти тесты из ассоциаций покрывают ряд вещей:

• Государственные тесты (реквизиты)
• Структурные тесты (снова снимки не предпочтителен здесь)
• redux соединенные контейнеры – тесты поведения на mapstatetopops & mapdispatchtoprops
• Действия Redux
• Редукторы Redux

Мой цикл TDD (очень грубый список)

(При условии изменения, но это то, как я делаю это сейчас через React-redux):

• Создание теста на контейнер Redux. Чтобы пройти этот тест, он заставляет меня создавать тест редуктора (и несколько других тестов ниже)
• Создайте тест редуктора. Этот тест нуждается в действии, который я еще не создал. Итак, изготовление этого тестового прохода редуктора создает действие
• Тест приводит к созданию этого действия, написав тест на действие. Затем я реализую это действие. Тест на действия проходит
• Действие было реализовано, так что теперь мой тестовый редуктор проходит
• Напишите тест MapStatoPOPS, чтобы заставить меня реализовать MapStatetOponops. Теперь он сможет получить штат из магазина, после этого редуктор работает
• Наконец я создаю соответствующий тупой компонент презентации, который подключенный контейнер будет представлять. Я создаю тест для этого, и это заставляет меня реализовать презентационную компонент
• Часть получения теста на презентационные компоненты для пропуска может означать добавление событий и создание вызовов обработчика (или не может). Если это так, то я напишу тест, чтобы заставить меня реализовать mapdispatchtonops
• Где-то там мне может потребоваться создавать некоторые методы жизненного цикла компонентов ..

Примечание. Здесь есть несколько шагов, я не кладу, потому что это сделает этот пост слишком долго.

Я только что закончил функцию!

Шума

Я лично не люблю их, но если вы абсолютно чувствуете, что хотите использовать шутки шума, а затем добавьте их сверху в виде интеграционного слоя. Просто пожалуйста, не используйте их как основной способ тестирования или полагаться, как единственный способ покрыть себя тестами. Я TDD, чтобы они даже не имеют смысла и я не могу использовать их в моем потоке TDD, потому что я не могу TDD с волшебство и единица Испытания должны быть изолированы и развязаны. И я не очень рад, что, кажется, Facebook говорит всем, что снимки – это способ избавиться от «боли», чтобы написать тесты подразделения TBH.

Я думаю, что сообщество должно практиковать, как писать тесты, а не убегать от них («Я сгорел», – они берут слишком долго «,« Мы не нуждаются в них »и т. Д. – давайте вырезать погоню и раскрыть Правда: Это потому, что Мы не пытаемся практиковаться и стать лучше и быстрее, написав их !). Нам нужны разработчики, становясь лучше в Написание первых классов тесты Отказ

Бег Mocha – всегда было легко с реагированными

Поэтому, когда я обычно создаю пользовательские реактивные проекты, обычно я просто добавляю .babelrc Файл, добавил все, что ES6 предустановки Мне нужно и мокко всегда бегали просто хорошо. Я сделал это так много раз, что больше не «больно» для настройки моих пресетов ES6 TBH Отказ Кроме того, я бегу свои тесты с гораздо лучший тестовый бегун, чем командная линия И вот, я использую Вебсторт Тестовый бегун.

Для веб-таблицы, чтобы найти Babel и запустить Mocha через встроенный тестовый бегун, вы можете сделать одну из двух вещей:

Используйте Babel-Node в качестве переводчика узла

1. Добавить .babelrc С требуемым ES6 Прессы
2. Добавьте новый Test Config Test Webstorm Mocha и измените интерпретатор узла с использованием плоскости узла для использования Babel-Cli/Bin/Babel-Node вместо этого (тогда нет необходимости указывать --Compilers js: Babel-Core/Register ) Вариант.

Используйте параметры командной строки Mocha в тестовом конфиге веб-таблицы

1. Добавить .babelrc С требуемым ES6 Прессы
2. Затем добавьте это в Mocha Опции: --compilers js: babel-core/Регистрация

В любом случае, он всегда был кусочек пирога и всегда должен был получить веб-магазин, чтобы поговорить с проектом узла (реагировать или нет) … Если вы не используете приложение Create-raction.

Получить Моча работать с CRA – хак

Create-React-App Является ли попытка Facebook для обеспечения загрузочного проекта Zero-Config.

Некоторые команды хотят использовать приложение Create-React-App, чтобы «облегчить вещи». Я нашел это, однако, быть немного ограничительным TBH. Проще, они чувствуют, что он продолжает модернизировать последовательную и позволяет вам продюсировать быстрее. Справедливо.

Лично я предпочитаю просто Напишите мою автоматику создания через сценарии NPM вместо того, чтобы использовать глоток или веб-папа. Я чувствую, что эти инструменты вводят сложность и раздутые. Я чувствую, что писать сценарии NPM не сложно, и является гораздо более чистым способом автоматизации здания, минификации и всего этого джаза.

Но … если команда хочет использовать создание-реактивный приложение, и Если Я Будучи единственным написанием этого приложения Greenfield, не хочет заблокироваться, чтобы использовать только шутки, ну мне нужно было найти способ получить работу Mocha без выбросить Этот Boostrap Config. Как только вы извлеките, вы не можете вернуться.

Получение мокко снова работать – шаги

1. пряжа add -d babel-preset-racte-app

   ПРИМЕЧАНИЕ. Вы не можете использовать предустановку Babel-Preset-ES2015, поскольку приложение Create-ractment игнорирует его

2. Добавить .babelrc к корню вашего проекта и добавить эту предустановку к нему:

{
  "presets": ["react-app"]
}

или же

забыть .babelrc и добавьте предустановку на ваш Package.json :

"babel": {
    "presets": [
      "react-app"
    ]
  }`

Обновление (21.14.2017 за этот Выпуск ) Facebook:

Наша предустановка Babel больше не включает в себя Commentjs Transform (поскольку он не нужен, если модули ES6 поддерживаются из коробки, поскольку они на WebPack)

Из-за постоянных изменений, сделанных в Babel-Preset-React-App , вышеперечисленное, добавление Create-React-App’s Babel-Preset-React-App к Package.json больше не работает с рамками, отличными от шума. Babel-Preset-React-App Скидки все, что работает с ним, кроме шума, поэтому я нашел эту проблему после обновления Babel-Preset-React-App Отказ Что именно моя разглагольство с FB. Это также, почему вы в конечном итоге нерешительно извлеките rac react-create-app invity или forking (даже работа) в любом случае из-за небольших проблем, таких как это не только с тестированием, но вы обнаружите, что вы ограничены только тем, что FB позволяет в этом консервированном фреймворк.

Итак, теперь это становится:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-es2015-modules-commonjs"
    ]
  }

На данный момент, которые будут работать с Mocha и, вероятно, AVA, ленты и т. Д. Кто знает, что будет следующий взлом, если мы не хотим использовать шутку. Когда наши клиенты выбирают использовать Create-React-App (Я не собираюсь спорить с моим клиентом), мы также не должны быть вынуждены использовать шутки только потому, что это единственная структура, которая будет совместима с этим. Там, где Facebook потерпел неудачу, вот их просчет о том, как тестовые рамки очень мнения, и должно быть что-то, что вы можете просто подключить без проблем Babel. Рамки, отличные от того, что просто работают и работают хорошо, если вы просто использовали Pugin ES-2015 в любом другом проекте! Но FB думает, что все хотят проверить, как они делают, а тестирование – это огромный Ответственность, если вы вынуждены только в определенные основы из-за характера магии в этом приложении Create-React-App.

Настройка сделана! Сейчас беги моча

Запустите через командную строку через сценарий NPM

1. Добавьте этот скрипт на ваш Package.json : Сценарии: {‘Test’: Node_env = Development Mocha --Compilers JS: Babel-Core/Регистрация SRC/Test/Unit/**/*. SPEC.JS } (ваш тестовый путь может быть другим)

Беги через веб-историю классно Тестовый бегун

Не используйте Babel-Cli как переводчик узла и вместо этого и запустить Mocha, используя Mocha варианты (Babel-Cli/Babel-узел устарел и больше не поддерживается Webstorm):

1. Установить Узел переводчика к: Пользователь/bin/local/node
2. Добавить --compilers js: babel-core/Регистрация в варианты мокко
3. Добавьте это в Переменные среды : Node_env = Development (Создание-реактивное приложение ищет это)

Напоминание:

Jest это мошенничество Отказ FB хочет, чтобы вы использовали все в своей экосистеме, чтобы они придумывали на диландских претензиях! Не поддавайтесь их утверждению, что Мока отстой или как-то не подходит или трудно использовать. Дело в том, что это Jest Не приносит ничего нового в таблицу, что моча Уже хорошо. Mocha не дает мне больше не меньше, чем любые рамки в JS.