React Native, Детокс и Огурец

Введение

В этой статье показано, как настроить приложение React Native с Detox и Cucumber. Эта демонстрация работает только на iOS. Конфиг мультиОС для Огурца с Детоксом не решил, но и времени особо не уделял.

Предпосылки

Настройка приложения React Native (пропустите, если у вас есть приложение RN)

В терминале из каталога, который вы хотите сделать родителем своего приложения:

 expo init cucumber-detox-demo

Вам будет предоставлен выбор типа приложения, которое вы хотите создать. Для целей этой демонстрации я выбираю:

minimal     bare and minimal, just the essentials to get you started

Когда установка выставки завершена:

cd cucumber-detox-demo/ios
pod install

Это установит собственные пакеты, которые вам понадобятся для приложения. Теперь, чтобы убедиться, что все работает, запустите:

cd ../    # back to the base cucumber-detox-demo directory
yarn ios

Приложение должно собраться и запуститься.

Хорошо, теперь мы можем перейти к детоксу и огурцу.

Настройка детоксикации (пропустите, если у вас уже есть настройка детоксикации)

Все еще в базовом каталоге Cucumber-Detox-Demo установите следующее:

npm install -g detox-cli     # global detox command line
yarn add detox -D            # detox dev dependency
yarn add jest -D             # jest dev dependency

Теперь давайте настроим детокс:

detox init -r jest

Для этой демонстрации мы используем только конфигурацию iOS, поэтому измените раздел apps.ios файла .detoxrc.json, чтобы он выглядел следующим образом.

...
"ios": {
  "type": "ios.app",
  "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/cucumberdetoxdemo.app",
  "build": "xcodebuild -workspace ios/cucumberdetoxdemo.xcworkspace -scheme cucumberdetoxdemo -configuration Debug -sdk iphonesimulator -arch x86_64 -derivedDataPath ios/build"
},
...

Это дает Detox возможность создавать и находить пакет .app для вашего приложения. Итак, давайте запустим детокс-билд и запустим детокс-тест.

detox build --configuration ios
detox test --configuration ios

Тесты не пройдут, потому что в минимальном приложении, которое мы выбрали, нет правильных элементов и текста.

Настройка огурца

Добавьте огурец и регистрацию Babel в свое приложение

yarn add @cucumber/cucumber -D
yarn add @babel/register -D

Теперь давайте изменим строку в нашем App.js, которая имеет <Text>Open up App.js..., чтобы включить testID. Теперь должно быть:

<Text testID="welcome">Open up App.js to start working on your app!</Text>

А в файле .detoxrc.json удалите секцию android объекта configurations. Это делается для того, чтобы Detox автоматически выбирал конфигурацию ios. Результирующий раздел configurations должен выглядеть так:

Далее давайте напишем простой файл признаков корнишона. Создайте новый каталог с именем cucumber и добавьте следующий first.feature файл:

И давайте добавим еще один файл с именем hooks.js в тот же каталог cucumber:

Это установка и демонтаж детоксикации с огурцом.

Теперь давайте создадим скрипт для запуска огурца. В вашем package.json в разделе scripts добавьте:

"cucumber": "./node_modules/.bin/cucumber-js --require-module @babel/register ./cucumber/*.feature"

Чтобы проверить это, запустите

yarn cucumber

Вы должны получить желтый вывод в своей командной строке, говорящий, что у вас нет шагов, определенных для Given I should see the {string} element и Then I should see the {string} text. Итак, давайте создадим файл finders.step.js в каталоге cucumber.

Тогда давайте снова запустим yarn cucumber и посмотрим, как это пройдет!

Репо

Ознакомьтесь с полным репозиторием по адресу: https://github.com/jaydon-peters/cucumber-detox-demo