Detox | Gray box end-to-end testing | iOS library
kandi X-RAY | Detox Summary
Support
Quality
Security
License
Reuse
- Compose config .
- Validates the device type
- Initialize bunyan stream .
- Compose app config .
- List of class information from UI
- Creates an array of device classes
- Launchs a device process .
- Executes a command with logs and retries to retry .
- Composes the app app config .
- Composes the session config .
Detox Key Features
Detox Examples and Code Snippets
Trending Discussions on Detox
Trending Discussions on Detox
QUESTION
I install npm i @types/react-native-snap-carousel and version is 3.8.5 My package.json is
{
"name": "olivers",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"ios": "react-native run-ios",
"android": "react-native run-android",
"test:e2e": "detox test -c ios.sim.debug",
"build:e2e": "detox build -c ios.sim.debug",
"ci:test:e2e": "detox test -c ios.sim.release -l verbose --cleanup",
"ci:build:e2e": "detox build -c ios.sim.release",
"compile": "tsc --noEmit -p . --pretty",
"format": "npm-run-all format:*",
"format:js": "prettier --write \"app/**/*.js\"",
"format:json": "prettier --write \"app/**/*.json\"",
"format:md": "prettier --write \"**/*.md\"",
"format:ts": "prettier --write \"app/**/*.ts{,x}\"",
"lint": "eslint index.js app storybook test --fix --ext .js,.ts,.tsx && yarn format",
"patch": "patch-package",
"storybook": "start-storybook -p 9001 -c ./storybook",
"test": "jest",
"adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
"postinstall": "node ./bin/postInstall",
"build-ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
"build-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"clean": "react-native-clean-project",
"clean-all": "npx react-native clean-project-auto"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.14",
"@react-native-community/checkbox": "^0.5.9",
"@react-native-community/masked-view": "0.1.10",
"@react-native-picker/picker": "^2.2.1",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "~6.0.1",
"@react-navigation/native-stack": "^6.0.2",
"@react-navigation/stack": "~6.0.1",
"@types/react-native-snap-carousel": "^3.8.5",
"apisauce": "2.0.0",
"cors": "^2.8.5",
"expo": "^43.0.4",
"expo-linear-gradient": "^10.0.3",
"expo-localization": "11.0.0",
"i18n-js": "3.8.0",
"mobx": "6.1.8",
"mobx-react-lite": "3.2.0",
"mobx-state-tree": "5.0.1",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-bottom-action-sheet": "^2.0.2",
"react-native-bouncy-checkbox": "^2.1.7",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-helper": "0.0.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "6.2.0",
"react-native-paper": "^4.10.1",
"react-native-picker-select": "^8.0.4",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "3.1.8",
"react-native-screens": "3.8.0",
"react-native-splash-screen": "^3.3.0",
"react-native-switch-toggle": "^2.2.1",
"react-native-sync-localstorage": "^0.0.3",
"react-native-vector-icons": "^9.0.0",
"react-navigation": "^4.4.4",
"react-navigation-material-bottom-tabs": "^2.3.4",
"react-navigation-tabs": "^2.11.1",
"reactotron-mst": "3.1.3",
"reactotron-react-js": "^3.3.7",
"reactotron-react-native": "5.0.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"toggle-switch-react-native": "^3.3.0",
"validate.js": "0.13.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "7.12.1",
"@babel/plugin-proposal-optional-catch-binding": "7.12.1",
"@babel/runtime": "^7.12.5",
"@bam.tech/react-native-make": "^3.0.3",
"@storybook/addon-storyshots": "6.1.10",
"@storybook/react-native": "5.3.23",
"@storybook/react-native-server": "5.3.23",
"@types/i18n-js": "3.0.3",
"@types/jest": "26.0.19",
"@types/react": "16.14.0",
"@types/react-native": "0.63.40",
"@types/react-test-renderer": "17.0.1",
"@typescript-eslint/eslint-plugin": "4.10.0",
"@typescript-eslint/parser": "4.10.0",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
"detox": "17.14.5",
"eslint": "^8.4.0",
"eslint-config-prettier": "7.0.0",
"eslint-config-standard": "16.0.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-native": "3.10.0",
"fbjs-scripts": "3.0.0",
"jest": "^27.4.3",
"jest-circus": "25.5.4",
"jest-expo": "^43.0.1",
"jetifier": "1.6.6",
"npm-run-all": "4.1.5",
"patch-package": "6.2.2",
"postinstall-prepare": "1.0.1",
"prettier": "2.2.1",
"react-devtools-core": "4.10.1",
"react-dom": "^17.0.2",
"react-native-clean-project": "^3.6.3",
"react-native-web": "^0.16.3",
"react-powerplug": "1.0.0",
"solidarity": "^3.0.4",
"typescript": "4.2.3"
},
"jest": {
"preset": "jest-expo",
"setupFiles": [
"/test/setup.ts"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/e2e"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|expo|expo-linear-gradient|@react-native|@react-native-async-storage|@react-navigation|@storybook|@react-native-community|expo-localization)"
]
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": false,
"trailingComma": "all"
},
"detox": {
"test-runner": "jest",
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/olivers.app",
"build": "xcodebuild -workspace ios/olivers.xcworkspace -scheme olivers -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
},
"ios.sim.release": {
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/olivers.app",
"build": "xcodebuild -workspace ios/olivers.xcworkspace -scheme olivers -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
}
}
},
"eslintConfig": {
"root": true,
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-native/all",
"standard",
"prettier",
"prettier/@typescript-eslint"
],
"plugins": [
"@typescript-eslint",
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"globals": {
"__DEV__": false,
"jasmine": false,
"beforeAll": false,
"afterAll": false,
"beforeEach": false,
"afterEach": false,
"test": false,
"expect": false,
"describe": false,
"jest": false,
"it": false
},
"rules": {
"@typescript-eslint/ban-ts-ignore": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"@typescript-eslint/no-var-requires": 0,
"comma-dangle": 0,
"multiline-ternary": 0,
"no-undef": 0,
"no-unused-vars": 0,
"no-use-before-define": "off",
"quotes": 0,
"react-native/no-raw-text": 0,
"react/no-unescaped-entities": 0,
"react/prop-types": "off",
"space-before-function-paren": 0
}
}
}
So i check installing so many time and did remove node_modules and did npm install many time
The error massage is
error: Error: Unable to resolve module react-native-snap-carousel from /Users/jeonchangmin/Desktop/newdir/olivers/olivers/app/screens/welcome/event-banner.tsx: react-native-snap-carousel could not be found within the project or in these directories:
node_modules
../../../../node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
3 | import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
4 | import BottomSheet from "reanimated-bottom-sheet"
> 5 | import Carousel from "react-native-snap-carousel"
| ^
6 |
7 | const EventBannerSheet: React.FC = () => {
8 | const sheetRef = useRef(null)
at ModuleResolver.resolveDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:129:15)
at DependencyGraph.resolveDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
at Object.resolve (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce ()
at resolveDependencies (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at async addDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 4)
Also I did 4 steps
- Clear watchman watches: watchman watch-del-all
- Delete node_modules and run yarn install
- Reset Metro's cache: yarn start --reset-cache
- Remove the cache: rm -rf /tmp/metro-*
But still not working..... Someone Help me???
Last My event-banner.tsx is
import React, { useRef, useState } from "react"
import { Dimensions } from "react-native"
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
import BottomSheet from "reanimated-bottom-sheet"
import Carousel from "react-native-snap-carousel"
const EventBannerSheet: React.FC = () => {
const sheetRef = useRef(null)
const carouselRef = useRef(null)
const SliderWidth = Dimensions.get("screen").width
const [activeIndex, setActivateIndex] = useState(0)
const [carouselState, setCarouselState] = useState([
{
title: "Item 1",
text: "Text 1",
},
{
title: "Item 2",
text: "Text 2",
},
{
title: "Item 3",
text: "Text 3",
},
{
title: "Item 4",
text: "Text 4",
},
{
title: "Item 5",
text: "Text 5",
},
])
const _onPressCarousel = (index: any) => {
// here handle carousel press
carouselRef.current.snapToItem(index)
}
const _renderItem = ({ item, index }) => {
return (
{
_onPressCarousel(index)
}}
style={{
backgroundColor: "white",
borderRadius: 20,
height: 300,
padding: 50,
}}
>
{item.title}
{item.text}
)
}
const renderContent = () => (
{/*
*/}
setActivateIndex(index)}
activeSlideAlignment="center"
/>
{
sheetRef.current.snapTo(2)
}}
>
오늘 하루 보지않기
sheetRef.current.snapTo(2)}>
닫기
)
return (
<>
)
}
const styles = StyleSheet.create({
bottomSheet: {
backgroundColor: "white",
padding: 25,
height: 440,
},
sheetTextContainer: {
height: 270,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#d3d3d3",
borderRadius: 10,
},
sheetText: {
fontSize: 30,
color: "white",
},
sheetCloseContainer: {
flexDirection: "row",
justifyContent: "space-between",
marginTop: 20,
},
})
export default EventBannerSheet
ANSWER
Answered 2021-Dec-17 at 08:10I only install
npm install --save @types/react-native-snap-carousel
because i use typeScript... But i must install
$ npm install --save react-native-snap-carousel
QUESTION
Is there a way to force a test to fail in Detox? I haven't found anything in the documentation that says this can be the case. I am comparing two IDs that are hidden in an element and screen of my app and if they don't match, I want to fail the test.
if (element.id === screen.id) {
do
}
else {
*fail test*
}
it(`should invite User`, async () => {}
Or is it as easy as just throwing an error? Thanks
ANSWER
Answered 2022-Feb-26 at 02:05Detox itself delegates test logic to a test runner.
Detox delegates the actual JavaScript test-code execution to a dedicated test-runner. It supports the popular Jest and Mocha out of the box.
If you are using jest
as the underlying test runner
, you could just use its fail
method as follows.
if (element.id === screen.id) {
do
}
else {
fail('test fails');
}
In mocha
you could use the following function.
assert.fail("actual", "expected", "Error message");
We could also abuse the detox high level api to achieve the same (but less readable).
await waitFor(element(by.id(notVisible.id))).toBeVisible().withTimeout(5);
QUESTION
I have a Javascript object :
const mapping = {
'Mind Management': {
type: 'average',
linked_topics: ['Digital Detox', 'Small Scaling', 'Simplexity'],
edge: 'Zeroed Out'
},
'Ancient Wisdom': {
type: 'direct',
edge: 'Roots Revival'
}
};
I want to iterate through this object and check if the key
or the linked_topics
(if present) of the object matches a string value.
const stringToBeMatched = 'Simplexity'
Code that I tried:
for (var key in mapping) {
if(key === stringToBeMatched || mapping[key].linked_topics.includes(stringToBeMatched) ) {
console.log(`found ${stringToBeMatched} in ${key}`);
}
}
I'm getting the following eslint error with this:
ESLint: for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.(no-restricted-syntax)
How can this be fixed? Is there any better way to achieve this without using for..in?
ANSWER
Answered 2021-Dec-23 at 11:31You can get only the keys using Object.keys
const keys = Object.keys(mapping);
keys.forEach((key) => {
if(key === stringToBeMatched || mapping[key].linked_topics.includes(stringToBeMatched) ) {
console.log(`found ${stringToBeMatched} in ${key}`);
}
})
QUESTION
I am experiencing difficulty writing tests for react-native typescript screen using instructions from the URL below https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/
I keep getting the below error
FAIL app/screens/login/login-screen.test.tsx ● Test suite failed to run
[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.
To fix this issue try these steps:
• Run `react-native link @react-native-community/async-storage` in the project root.
• Rebuild and restart the app.
• Run the packager with `--reset-cache` flag.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.
• If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-community.github.io/async-storage/docs/advanced/jest
If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-async-storage/issues
at Object. (node_modules/@react-native-community/async-storage/lib/commonjs/AsyncStorage.native.js:17:9)
at Object. (node_modules/@react-native-community/async-storage/lib/commonjs/index.js:6:1)
See the login screen test file content below
import AsyncStorage from "@react-native-community/async-storage"
import { render } from "@testing-library/react-native"
import React from "react"
import { LoginScreen } from ".."
it("renders correctly", async () => {
const { getAllByText } = await render()
expect(getAllByText("Login").length).toBe(1)
expect(AsyncStorage.getItem).toBeCalledWith("myKey")
})
test\setup.ts
// we always make sure 'react-native' gets included first
import "react-native"
// libraries to mock
import "./mock-react-native-image"
import "./mock-async-storage"
import "./mock-i18n"
import "./mock-reactotron"
jest.useFakeTimers()
declare global {
let __TEST__
}
and test\mock-async-storage.ts
import mockAsyncStorage from "@react-native-async-storage/async-storage/jest/async-storage-mock"
jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage)
my package.json
{
"name": "special-project",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"ios": "react-native run-ios",
"android": "react-native run-android",
"test:e2e": "detox test -c ios.sim.debug",
"build:e2e": "detox build -c ios.sim.debug",
"ci:test:e2e": "detox test -c ios.sim.release -l verbose --cleanup",
"ci:build:e2e": "detox build -c ios.sim.release",
"compile": "tsc --noEmit -p . --pretty",
"format": "npm-run-all format:*",
"format:js": "prettier --write \"app/**/*.js\"",
"format:json": "prettier --write \"app/**/*.json\"",
"format:md": "prettier --write \"**/*.md\"",
"format:ts": "prettier --write \"app/**/*.ts{,x}\"",
"lint": "eslint index.js app storybook test --fix --ext .js,.ts,.tsx && yarn format",
"patch": "patch-package",
"storybook": "start-storybook -p 9001 -c ./storybook",
"test": "jest",
"adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
"postinstall": "node ./bin/postInstall",
"build-ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
"build-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"clean": "react-native-clean-project",
"clean-all": "npx react-native clean-project-auto"
},
"dependencies": {
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/checkbox": "^0.5.9",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/material-top-tabs": "^6.0.6",
"@react-navigation/native": "~6.0.1",
"@react-navigation/native-stack": "^6.0.2",
"@react-navigation/stack": "~6.0.1",
"@reduxjs/toolkit": "^1.6.2",
"@unimodules/core": "6.0.0",
"apisauce": "2.0.0",
"axios": "^0.24.0",
"expo-linear-gradient": "^9.2.0",
"expo-localization": "9.1.0",
"i18n-js": "3.8.0",
"mobx": "6.1.8",
"mobx-react-lite": "3.2.0",
"mobx-state-tree": "5.0.1",
"node-fetch": "^3.1.0",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-appearance": "^0.3.4",
"react-native-camera": "^4.2.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-crop-picker": "^0.36.4",
"react-native-keychain": "6.2.0",
"react-native-material-menu": "^2.0.0",
"react-native-pager-view": "^5.4.8",
"react-native-paper": "^4.10.1",
"react-native-permissions": "^3.1.0",
"react-native-qrcode-scanner": "^1.5.4",
"react-native-radio-buttons-group": "^2.2.7",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "3.1.8",
"react-native-screens": "3.4.0",
"react-native-tab-view": "^3.1.1",
"react-native-unimodules": "0.12.0",
"react-redux": "^7.2.6",
"reactotron-mst": "3.1.3",
"reactotron-react-js": "^3.3.7",
"redux": "^4.1.2",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"validate.js": "0.13.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "7.12.1",
"@babel/plugin-proposal-optional-catch-binding": "7.12.1",
"@babel/runtime": "^7.12.5",
"@storybook/addon-storyshots": "6.1.10",
"@storybook/react-native": "5.3.23",
"@storybook/react-native-server": "5.3.23",
"@testing-library/react-native": "^8.0.0",
"@types/i18n-js": "3.0.3",
"@types/jest": "26.0.19",
"@types/react": "16.14.0",
"@types/react-native": "0.63.40",
"@types/react-test-renderer": "16.9.4",
"@typescript-eslint/eslint-plugin": "4.10.0",
"@typescript-eslint/parser": "4.10.0",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
"detox": "17.14.5",
"eslint": "7.15.0",
"eslint-config-prettier": "7.0.0",
"eslint-config-standard": "16.0.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-native": "3.10.0",
"fbjs-scripts": "3.0.0",
"jest": "^25.5.4",
"jest-circus": "25.5.4",
"jest-expo": "^40.0.1",
"jetifier": "1.6.6",
"npm-run-all": "4.1.5",
"patch-package": "6.2.2",
"postinstall-prepare": "1.0.1",
"prettier": "2.2.1",
"react-devtools-core": "4.10.1",
"react-dom": "^17.0.2",
"react-native-clean-project": "^3.6.3",
"react-native-web": "^0.16.3",
"react-powerplug": "1.0.0",
"reactotron-react-native": "^5.0.0",
"solidarity": "2.3.1",
"typescript": "4.2.3"
},
"jest": {
"preset": "jest-expo",
"setupFiles": [
"/test/setup.ts"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/e2e"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|expo-linear-gradient|@react-native|@react-native-async-storage|@react-navigation|@storybook|@react-native-community|expo-localization|@unimodules)"
]
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": false,
"trailingComma": "all"
},
"detox": {
"test-runner": "jest",
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/special-project.app",
"build": "xcodebuild -workspace ios/special-project.xcworkspace -scheme special-project -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
},
"ios.sim.release": {
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/special-project.app",
"build": "xcodebuild -workspace ios/special-project.xcworkspace -scheme special-project -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
}
}
},
"eslintConfig": {
"root": true,
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-native/all",
"standard",
"prettier",
"prettier/@typescript-eslint"
],
"plugins": [
"@typescript-eslint",
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"globals": {
"__DEV__": false,
"jasmine": false,
"beforeAll": false,
"afterAll": false,
"beforeEach": false,
"afterEach": false,
"test": false,
"expect": false,
"describe": false,
"jest": false,
"it": false
},
"rules": {
"@typescript-eslint/ban-ts-ignore": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"@typescript-eslint/no-var-requires": 0,
"comma-dangle": 0,
"multiline-ternary": 0,
"no-undef": 0,
"no-unused-vars": 0,
"no-use-before-define": "off",
"quotes": 0,
"react-native/no-raw-text": 0,
"react/no-unescaped-entities": 0,
"react/prop-types": "off",
"space-before-function-paren": 0
}
}
}
The actual login screen file
import React, { FC, useState } from "react"
import {
View,
SafeAreaView,
TouchableOpacity,
ScrollView,
TextInput,
ImageBackground,
KeyboardAvoidingView,
Alert,
} from "react-native"
import { StackScreenProps } from "@react-navigation/stack"
import { observer } from "mobx-react-lite"
import { Button, Text, AutoImage as Image } from "../../components"
import { NavigatorParamList } from "../../navigators"
import { Images } from "../../config"
import { setIsLoggedIn } from "../../reducers/loginReducer"
import { useDispatch } from "react-redux"
import { setTokenValue } from "../../reducers/tokenReducer"
import { LOGIN_URL, showErrorAlert } from "../../utils/constants"
import axios from "axios"
import { setSalesAgentIdValue } from "../../reducers/salesAgentIdReducer"
import {
BLUESIGNUP_TEXT,
BOTTOM_HALF,
CONTINUE,
CONTINUE_TEXT,
FOOTER_CONTENT,
FULL,
HOME_LOGO,
KEYBOARD_AVOID_VIEW,
LABEL,
LOGO_TEXT,
RED_ACTION_LINK,
RED_TEXT,
REGULAR_TEXT,
SUBJECT,
TEXT_INPUT,
TEXT_INPUT_END,
} from "./loginscreen-styles"
import { setRefreshTokenValue } from "../../reducers/refreshTokenReducer"
export const LoginScreen: FC> = observer(
({ navigation }) => {
const dispatch = useDispatch()
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [errortext] = useState("")
let tokenValue: any
let refreshTokenValue: any
let salesAgenIdValue: any
const api = axios.create({
baseURL: LOGIN_URL,
})
const onLogin = async () => {
if (!email) {
showErrorAlert("Your Email")
return
}
if (!password) {
showErrorAlert("Your Password")
return
}
console.log("<<< inside onlogin >>>>>")
const dataToSend = {
email: email,
password: password,
}
try {
console.log("<<<<<<< BEFORE RESPONSE FOR LOGIN >>>>>>>>>")
const res = await api.post("/", dataToSend)
console.log("Res >> ", res)
console.log("<<<<<<>>>>>>>>")
// eslint-disable-next-line no-prototype-builtins
if (res.hasOwnProperty("data")) {
tokenValue = res.data.data.userToken
refreshTokenValue = res.data.data.refreshToken
console.log("<<<<<<>>>>>>>>")
console.log(JSON.stringify(tokenValue))
console.log("<<<<<<>>>>>>>>")
console.log("<<<<<<< REFRESH TOKEN>>>>>>>>>")
console.log(JSON.stringify(refreshTokenValue))
console.log("<<<<<<< REFRESH TOKEN>>>>>>>>>")
dispatch(setTokenValue(tokenValue))
dispatch(setRefreshTokenValue(refreshTokenValue))
dispatch(setIsLoggedIn(true))
salesAgenIdValue = res.data.data.userId
console.log("<<<<<<>>>>>>>>")
console.log(JSON.stringify(salesAgenIdValue))
console.log("<<<<<<>>>>>>>>")
dispatch(setSalesAgentIdValue(salesAgenIdValue))
setTimeout(() => {
navigation.navigate("drawer")
}, 1000)
} else {
console.log("<<<<<<< ERRRRRROR >>>>>>>>>")
}
} catch (err) {
console.log(err)
Alert.alert("An Error occurred " + err)
}
}
return (
Special App
{errortext}
Login
Email
setEmail(email)}
placeholder=""
autoCapitalize="none"
value={email}
/>
Password
setPassword(password)}
secureTextEntry={true}
placeholder=""
autoCapitalize="none"
value={password}
/>
navigation.navigate("resetpassword")}>
Forgot password?
navigation.navigate("signup")}>
Don't have an Account yet? Sign up
)
},
)
I have been battling with this issue for almost a week Please advise me with the right syntax to use in writing proper tests or at least tell me how to resolve the async storage problem
ANSWER
Answered 2021-Dec-06 at 15:23Based on your package.json dependencies you dont have the @react-native-async-storage
dependency, you have @react-native-community/async-storage
, which is the old organisation namespace.
Try doing
npm uninstall @react-native-community/async-storage
npm install @react-native-async-storage/async-storage
QUESTION
I have a React Native app up and running, and have Detox installed and working for iOS, but having issues running the test for Android. When I run the test, I get the following error:
There was no "aapt" executable file in directory: /Users/me/Library/Android/sdk/Users/me/Library/Android/sdk/build-tools/30.0.3.
There seems to be some duplication in that referenced path, but Users/me/Library/Android/sdk/build-tools/30.0.3
definitely exists. I'm not sure where this path is being referenced, or any config changes I can make to Detox to reference the SDK path correctly.
ANSWER
Answered 2021-Nov-30 at 05:26This error seemed to have been caused by an incorrect installation of the 30.0.3 SDK Build Tools. I simply uninstalled it and everything appears to be working fine now.
In Android Studio -> Tools -> SDK Manager -> SDK Tools -> check "Show Package Details" -> uncheck the version you want to remove -> Apply
QUESTION
My jest scripts are failing on react-native-modalize. Why jest is failing at this point
error
● Test suite failed to run
TypeError: Cannot read property 'minor' of undefined
at Object. (node_modules/react-native-modalize/lib/utils/devices.js:20:76)
at Object. (node_modules/react-native-modalize/lib/utils/use-dimensions.js:25:19)
My package.json down below,
pacakge.json
{
"name": "vendor",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "npx react-native run-android",
"ios": "react-native run-ios"
},
"dependencies": {
"@jest/globals": "^27.0.6",
"@react-native-async-storage/async-storage": "^1.15.6",
"react-native-modal": "^12.1.0",
"react-native-modalize": "^2.0.8",
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/runtime": "^7.15.3",
"@codler/react-native-keyboard-aware-scroll-view": "1.0.1",
"@react-native-community/eslint-config": "^3.0.0",
"@testing-library/jest-native": "^4.0.2",
"@testing-library/react-native": "^7.2.0",
"@typescript-eslint/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.0.6",
"detox": "^17.14.9",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest": "^26.6.3",
"jest-circus": "^26.6.0",
"jsdom": "17.0.0",
"jsdom-global": "3.0.2",
"metro-react-native-babel-preset": "^0.66.2",
"prettier": "^2.3.2",
"react-native-rename": "^2.9.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"coverageReporters": [
"text"
],
"reporters": [
"default",
"jest-junit"
],
"preset": "react-native",
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
],
"transformIgnorePatterns": [
"/node_modules/(?!react-native)/.+"
],
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
]
},
"jest-junit": {
"output": "output/coverage/junit/junit.xml",
"usePathForSuiteName": "true"
}
}
I upgraded the react-native version before upgrading it was working fine.
Why it's failing? Should I downgrade any package or did I miss anything?
ANSWER
Answered 2021-Nov-12 at 11:15It has been fixed in this merge. So, go ahead and update your version of react-native-modalize
As you may have seen in node_modules/react-native-modalize/lib/utils/devices.js
it was related to the reactNativeVersion.
QUESTION
I am having strange issue with React Native Detox testing when being ran on local and CI environments.
Following is the piece of code being ran on both of the environments:
import { E2E_IDS } from './constants';
import {
executeBeforeEachTest,
tapById,
testAccount,
typeTextById,
waitForId,
waitForText,
} from './utils';
describe('User email sign in flow test', () => {
beforeEach(executeBeforeEachTest);
it('should login with provided user credentials successfully', async () => {
await tapById(E2E_IDS.SIGN_IN);
await waitForText('Welcome back');
await tapById(E2E_IDS.SIGN_IN_VIA_EMAIL);
await typeTextById(E2E_IDS.SIGN_IN_EMAIL, testAccount.USER);
await typeTextById(E2E_IDS.SIGN_IN_PASSWORD, testAccount.PASS);
await tapById(E2E_IDS.SIGN_IN_LOGIN_BUTTON);
await waitForText('You have no classes yet.');
});
});
On my local mac machine, e2e tests runs fine as expected.
On Github CI mac machine, e2e fails because single tap on SIGN_IN_LOGIN_BUTTON is not enough, if I do the following:
await tapById(E2E_IDS.SIGN_IN_LOGIN_BUTTON, 2);
If we tap the button twice, then it passes the test. I wonder why the first tap is not being acknowledged by the CI machine, that we had to do twice.
If anyone could help narrow down the root cause of this behaviour that would be great.
ANSWER
Answered 2021-Oct-29 at 11:16The last issue was quite tricky, it was actually a UX bug. So, when user types their email and password in the login form, the keyboard doesn't drop when we tap on the login button, because we had a keyboard overlay which is blocking the login button being tapped. To circumvent this issue, we need to add keyboardShouldPersistTaps='handled' to the top level scrollView which will trigger down the tap events to it's child which will result in closing the keyboard plus the tap to right element, all in one go. It was strange why this didn't happen on my local simulator, perhaps, we can toggle the keyboard on/off which didn't help me to narrow down the issue at hand.
Why 2 taps? Because, first one was to drop the keyboard (inactive state) then the next one was to tap on the login button.
QUESTION
As the title states, I'm looking to test some functions we use in a React Native app. Indeed, in the future I would like to write business functions based on our cucumber tests - so ideally my dev workflow would begin with me creating a test in our code base and wrestling with it until it meets all tests. However, I'm running into a problem that whenever I import said functions from our codebase, cucumber breaks and the tests don't run. So far, using detox
for end-to-end testing has worked fine (interacting with elements via TestID
and so on), but in a recent set of tests, I was trying to call a function explicitly, and this is where we start to run into errors.
We allow for cucumber tests in TypeScript by writing the following in our cucumber.js
file:
let common = [
'features/**/*.feature', // Specify our feature files
'--require-module ts-node/register', // Load TypeScript module
'--require features/support/**/*.ts', // Load support files
'--require step_definitions/**/*.ts', // Load step definitions
].join(' ');
module.exports = {
default: common,
};
However, in my step_definitions
, as soon as I try and import a function from our React Native project, I start getting errors like this one, for example from react-native
:
/Users/file/path/to/project/here/node_modules/react-native/index.js:14
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Object.require.extensions. [as .js] (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1300:43)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (/Users/file/path/to/project/here/src/helpers/utils.ts:2:1)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Module.m._compile (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1310:23)
at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Object.require.extensions. [as .ts] (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1313:12)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
codepath: /Users/file/path/to/project/here/step_definitions/5-Chat/2-1-chat-deletion-indicator.steps.ts
I see here that the commonjs (cjs
) module is firing the error. I understand that React Native is written for ES6, so commonjs is wrong in the first place. What I don't know how to do is keep my fancy cucumber.js
setup file and the ability to keep my tests (and imported functions) in TypeScript without ts-node
complaining.
Any assistance, pointers, or ideas here would be greatly appreciated. I'll be glad to include any other configs and files needed.
ANSWER
Answered 2021-Oct-21 at 15:22For tests on single functions (in this case these are unit tests), I have since begun to use jest-cucumber
- this has it's own configuration and does not need use of such cucumber.js
file. This cucumber.js
file pattern is from using cucumber with an E2E framework like detox.
QUESTION
As the title states, I would like to programmatically retrieve properties of matched elements in Detox. I know Detox sees them, because as we all infamously know when a toBeVisible
expectation fails by the 75% view rule (a built in Detox opinion for the uninitated), we can see what detox 'got', usually it is a message something like this:
Got: "ReactTextView{id=13725, visibility=VISIBLE, width=376, height=102, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=false, is-selected=false, layout-params=android.view.ViewGroup$LayoutParams@ac227fb, tag=PROFILE_NAME_TEXT, root-is-layout-requested=false, has-input-connection=false, x=486.0, y=120.0, text=Anonymous, input-type=0, ime-target=false, has-links=false}"
So we have things like the width
, height
, focus
and so on.
My question is, how can we get at these properties programmatically? Specifically, I have an element that is expanding after a button tap and I want to be sure the height is larger than it was before.
If you check the methods available for element(by.id("SOME_ID"))
, there are only action methods available...
ANSWER
Answered 2021-Oct-19 at 07:25I've finally discovered the answer which was hard to find initial due to missing typings of detox
at the time. Properties like height
and width
that I mentioned are available through getAttributes()
method:
const attributes = await element(by.text('Tap Me')).getAttributes();
expect(attributes.text).toBe('Tap Me');
const multipleMatchedElements = await element(by.text('Multiple')).getAttributes();
expect(multipleMatchedElements.elements.length).toBe(5);
expect(multipleMatchedElements.elements[0].identifier).toBe('FirstElement');
The available properties vary between Android and iOS as well. See the documentation in the library for getAttributes()
, and the pull request on detox which adds all the types.
QUESTION
string.xml Here is my string
●\t\tCucumber Detox Water (1 glass)\n●\t\tSkimmed Milk (1 glass)\n●\t\tPeas Poha (1.5 katori)
When this string is used in xml it works perfectly but when using this string programmatically then it does not works
xml code
val textView:TextView = findViewById(R.id.textView)
textView.text = getString(R.string.bullet_text)
ANSWER
Answered 2021-Sep-16 at 12:27You can use custom style instead of string
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Detox
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page