Настройка Детокс с приложением Экспо.Возможно, вам лучше всего начать с чистого приложения, с которым вы еще ничего не сделали.Вы должны убедиться, что вы выполнили базовую настройку (шаг 1) для того, чтобы заставить детокс работать на вашем компьютере
Установите следующие devDependencies
npm i -D detox detox-expo-helpers expo-detox-hook jest
Обновите файл package.json
Добавьте следующее в файл package.json, это настроит детокс.Вы можете выбрать тип iPhone, который вам нужен.
"detox": {
"configurations": {
"ios.sim": {
"binaryPath": "bin/Exponent.app",
"type": "ios.simulator",
"name": "iPhone X"
}
},
"test-runner": "jest"
}
В разделе сценариев добавьте следующее:
"scripts": {
"e2e": "detox test --configuration ios.sim"
}
Это позволит нам выполнить детокс-тест, но с использованием npm run e2e
Настройка вашего первого теста
Выполните следующее, чтобы настроить ваш первый тест
detox init -r jest
Это добавит папку с именем e2e в ваш проект.Вы найдете три файла внутри него
config.jsonfirstTest.spec.jsinit.js
firstTest.spec.js isобразец теста.Вам нужно будет внести в него следующие изменения.
const { reloadApp } = require('detox-expo-helpers');
Вам также необходимо изменить следующую строку
await device.reloadReactNative();
на
await reloadApp();
Добавить клиента Expo в свой проект
- Загрузите iOS-приложение Expo Client из Expo.io / tools .
- Разархивируйте IPA iOS и переименуйте папку в
Exponent.app.Он будет иметь значок файла, но все равно будет папкой. - Создайте папку
bin и поместите внутрь Exponent.app, чтобы она соответствовала установленному выше двоичному пути.
Или альтернативноВы можете использовать следующий скрипт, создать файл и назвать его setup.sh в корневой директории вашего проекта, скопировать его содержимое и затем запустить его (вам, вероятно, потребуется дать ему разрешение на запуск, который вы можете выполнить, выполнив сначала chmod +x setup.sh)., затем вы можете запустить его, используя ./setup.sh).
#!/bin/bash -e
# query expo.io to find most recent ipaUrl
IPA_URL=`curl https://expo.io/--/api/v2/versions | python -c 'import sys, json; print json.load(sys.stdin)["iosUrl"]'`
# download tar.gz
TMP_PATH=/tmp/exponent.tar.gz
wget -O $TMP_PATH $IPA_URL
# recursively make app dir
APP_PATH=bin/Exponent.app
mkdir -p $APP_PATH
# unzip tar.gz into APP_PATH
tar -C $APP_PATH -xzf $TMP_PATH
Этот скрипт выполняет те же действия, что и выше.
Запустите ваш первый тест
Запустите упаковщик с expo start -c
Запустите симулятор, который вы планируете использовать для теста (поэтому, если вы выбрали iPhone X, запуститеiPhone X и т. д.).
Затем в своем терминале вы можете запустить npm run e2e, если вы добавили скрипт или вы можете запустить detox test.
Что вы обнаружите, так это то, что ваш тест будетпотерпеть поражение.Это нормально и следовало ожидать.
Теперь, если вы хотите пройти тест, вам нужно реализовать все тестовые случаи, которые есть в firstTest.spec.js, или вы можете отказаться от них и написать свой собственный.
Ссылки
Пройдите свои тесты
Если вы хотите пройти тесты, вы можете обновить следующие файлы и получить 3 прохождения тестов.
firstTest.spec.js
const { reloadApp } = require('detox-expo-helpers');
describe('Example', () => {
beforeEach(async () => {
await reloadApp();
});
it('should have welcome screen', async () => {
await expect(element(by.id('welcome'))).toBeVisible();
});
it('should show hello screen after tap', async () => {
await element(by.id('hello_button')).tap();
await expect(element(by.label('Hello!!!'))).toBeVisible();
});
it('should show world screen after tap', async () => {
await element(by.id('world_button')).tap();
await expect(element(by.label('World!!!'))).toBeVisible();
});
});
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default class App extends Component {
state = {
greeting: undefined
};
render () {
if (this.state.greeting) return this.renderAfterButton();
return (
<View
testID="welcome"
style={{
flex: 1,
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{ fontSize: 25, marginBottom: 30 }}>Welcome</Text>
<TouchableOpacity
testID="hello_button"
onPress={this.onButtonPress.bind(this, 'Hello')}>
<Text style={{ color: 'blue', marginBottom: 20 }}>Say Hello</Text>
</TouchableOpacity>
<TouchableOpacity
testID="world_button"
onPress={this.onButtonPress.bind(this, 'World')}>
<Text style={{ color: 'blue', marginBottom: 20 }}>Say World</Text>
</TouchableOpacity>
</View>
);
}
renderAfterButton () {
return (
<View
style={{
flex: 1,
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{ fontSize: 25 }}>{this.state.greeting}!!!</Text>
</View>
);
}
onButtonPress (greeting) {
this.setState({
greeting: greeting
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
