Ошибка настройки Detox в мобильном приложении React-Native / Expo: «ReferenceError: элемент не определен» - PullRequest
2 голосов
/ 26 апреля 2019

Я пытаюсь настроить сквозное тестирование с помощью Detox в мобильном приложении React-Native / Expo.Приложение и Jest в настоящее время работают нормально, но тесты Detox дают ReferenceError's.Я следовал инструкциям в этой ссылке, https://blog.expo.io/testing-expo-apps-with-detox-and-react-native-testing-library-7fbdbb82ac87,, а также на сайтах Detox и Jest.Я выполнил тесты через скрипт jest (yarn test) и detox test.

$ detox test --loglevel trace
detox[51199] INFO:  [test.js] configuration="ios.sim" loglevel="trace" artifactsLocation="artifacts/ios.sim.2019-04-26 12-31-53Z" recordLogs="none" takeScreenshots="manual" recordVideos="none" recordPerformance="none" node_modules/.bin/jest --config=e2e/config.json --maxWorkers=1 '--testNamePattern=^((?!:android:).)*$' "e2e"
● Validation Warning:

  Unknown option "setupFilesAfterEnv" with value ["./init.js"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

 FAIL  e2e/features/login/index.spec.js
  App
    ✕ should have login screen (272ms)
    ✕ should show hello screen after tap (104ms)
    ✕ should show world screen after tap (105ms)

  ● App › should have login screen

    ReferenceError: device is not defined

      at reloadApp (../node_modules/detox-expo-helpers/index.js:68:3)

  ● App › should have login screen

    ReferenceError: element is not defined
...

setupFilesAfterEnv - это опция jest.

Загруженный Expo IPAнаходится в каталоге bin / Exponent.app.

package.json

{
...
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "jest --watchAll --notify",
    "lint": "eslint .",
    "ci": "yarn lint && jest"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "formik": "^1.5.1",
    "invariant": "^2.2.4",
    "prop-types": "^15.7.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.3.2",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "babel-eslint": "^10.0.1",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-preset-expo": "^5.0.0",
    "detox": "^12.4.1",
    "detox-expo-helpers": "^0.6.0",
    "eslint": "^5.15.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "expo-detox-hook": "^1.0.10",
    "jest-expo": "^32.0.0",
    "prettier": "^1.16.4",
    "react-native-testing-library": "^1.7.0",
    "react-test-renderer": "^16.8.6",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "preset": "jest-expo",
    "clearMocks": true
  },
  "detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios.sim": {
        "binaryPath": "bin/Exponent.app",
        "type": "ios.simulator",
        "name": "iPhone XR"
      }
    }
  }
}

Каталог e2e прямо из Detox с некоторыми изменениями для Expo.

e2e /config.json

{
    "setupFilesAfterEnv": ["./init.js"],
    "testEnvironment": "node"
}

e2e / init.js

const detox = require('detox');
const config = require('../package.json').detox;
const adapter = require('detox/runners/jest/adapter');

jest.setTimeout(120000);
jasmine.getEnv().addReporter(adapter);

beforeAll(async () => {
    await detox.init(config);
});

beforeEach(async () => {
    await adapter.beforeEach();
});

afterAll(async () => {
    await adapter.afterAll();
    await detox.cleanup();
});

login.spec.js

import { reloadApp } from 'detox-expo-helpers';

describe('App', () => {
    beforeEach(async () => {
        await reloadApp();
    });

    it('should have login screen', async () => {
        await expect(element(by.id('login'))).toBeVisible();
    });

    it('should show hello screen after tap', async () => {
        await element(by.id('hello_button')).tap();
        await expect(element(by.text('Hello!!!'))).toBeVisible();
    });

    it('should show world screen after tap', async () => {
        await element(by.id('world_button')).tap();
        await expect(element(by.text('World!!!'))).toBeVisible();
    });
});

С другой стороны, я не знаюпочему в init.js. есть ссылка на жасминЯ думаю, это потому, что JestJS основан на Жасмин.Во всяком случае, похоже, что это не связано с ошибками.

1 Ответ

0 голосов
/ 30 апреля 2019

Резюме

Для этой проблемы существует открытый пул-запрос . Я цитирую Yaron Malim

ReferenceError: device is not defined

  at Object.reloadApp (../node_modules/detox-expo-helpers/index.js:68:3)

Когда я добавил следующее, требуется:

const { device } = require('detox');

Проблема была решена. Для этого мне пришлось добавить детокс в качестве зависимости. Это пакет.json

{
  "name": "detox-expo-helpers",
  "version": "0.6.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {
    "child-process-promise": "^2.2.1",
    "detox": "^12.2.0",
    "semver": "^5.6.0",
    "xdl": "^51.5.0"
  }
}

Сведения о подтвержденных файлах в запросе на извлечение

Установка необходимых зависимостей

detox-expo-helpers github repo включает пример приложения . Добавьте expo-detox-hook к вашему package.json и запустите npm install

{
  "devDependencies": {
    "detox": "^9.0.6",
    "detox-expo-helpers": "^0.6.0",
    "expo-detox-hook": "^1.0.10",
    "mocha": "^3.5.0"
  },
  "detox": {
    "configurations": {
      "ios.sim": {
        "binaryPath": "bin/Exponent.app",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    }
  }
}

Как объяснено на официальной detox-expo-helpers странице , вы должны следовать каждому шагу для настройки detox проекта , за исключением package.json конфигураций, включенных в этот шаг , которые отличаются в expo.

detox-expo-helpers включает в себя официальную конфигурацию для вашего эмулятора на шаге Загрузите приложение Expo в какой-то каталог вашего проекта и настройте в package.json.

Он также включает пример из Detox настроек для package.json

Ваш второй тест не пройден, потому что Detox не находит элемент на странице. Вам необходимо передать testID реквизит компоненту со значением 'hello_button'.

it('should show hello screen after tap', async () => {
    await element(by.id('hello_button')).tap();
    await expect(element(by.text('Hello!!!'))).toBeVisible();
});

документация по by.id matcher

by.id будет соответствовать идентификатору, который присваивается представлению через testID prop.

Ваш компонент должен выглядеть как

<TouchableOpacity testID={'hello_button'}>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...