How to mock functions in react-native using detox.
I am using google sign in app and want to mock the function for google sign in
tried jest and #testinglibrary but there I am not able to get the elements by getText/getTestID for picker or other components. There is many things about testing in react-native but I am not able to find the right way to do it.
How to test a react native app where I am using google sign in and each page is fetching details about users from AWS database and displaying details for modification.
Currently i am using the following libraries
"#react-native-async-storage/async-storage": "^1.15.5",
"#react-native-google-signin/google-signin": "^7.0.0-alpha.3",
"#react-native-picker/picker": "^1.16.5",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.0.4",
"add": "^2.0.6",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-elements": "^3.4.2",
"react-native-file-picker": "0.0.21",
"react-native-gesture-handler": "^1.10.3",
"react-native-pager-view": "^5.4.1",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.5.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^8.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/runtime": "^7.14.8",
"#react-native-community/eslint-config": "^3.0.0",
"#testing-library/react-native": "^8.0.0",
"babel-jest": "^27.0.6",
"detox": "^18.20.3",
"eslint": "^7.31.0",
"jest": "^27.0.6",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|(?!deck.gl)|ng-dynamic)"
]
},
"detox": {
"configurations": {
"android.emu.debug": {
"binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
"build": "cd android && gradlew clean assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
"type": "android.emulator",
"name": "Pixel_2_API_29"
}
},
"test-runner": "jest",
"testMatch": [
"<roots>/**/*.spec.js"
]
}
Have a look at the mocking guide for Detox.
Please note that you cannot apply mocking techniques familiar from the prior Jest experience, even though Detox runs on top of Jest, e.g.:
jest.mock('./src/myModule'); // NO, THIS WON'T WORK
All the mocking must be conducted with the help of Metro bundler, which powers React Native under the hood.
Related
I keep getting export * from #react-navigation/core. Unexpected token export whenever I try to run my test for my project :
https://github.com/MatTaNg/React-Native
(run npm i && npm run test:watch [don't worry npm i doesn't take long its a small project])
Here's my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"test": "jest",
"test:watch": "npm run test -- --watchAll"
},
"dependencies": {
"#types/jest": "^26.0.8",
"#types/node": "^14.0.27",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.10.1",
"react-native-responsive-screen": "^1.4.1",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "^2.9.0",
"react-native-web": "~0.11.7",
"react-test-renderer": "^16.13.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#testing-library/jest-native": "^3.3.0",
"#testing-library/react-native": "^7.0.1",
"#types/react": "~16.9.41",
"#types/react-native": "~0.62.13",
"jest": "^26.2.2",
"typescript": "~3.9.5"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
],
"jest": {
"preset": "react-native"
},
"private": true
}
I'm just not able to figure this out. Something with react-navigation core is messing everything up I think.
Another, separate issue is that for some reason the HTML (jsx) isn't showing up on my mobile device (IOS) but its working fine in the browser. Seems like its just ignoring all the html inside my route.
EDIT:
I've followed the docs https://docs.expo.io/guides/testing-with-jest/
I've just added this to my package.json:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
But now I'm getting this error when I run my test:
you are using expo therefore, you need to install expo-jest and use "preset": "jest-expo"
yarn add jest-expo --dev
package.json
"scripts": {
...
"test": "jest"
},
"jest": {
"preset": "jest-expo"
}
Here is DOCS for Expo jest. so, change expo jest configuration according to docs like below.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"test": "jest",
"test:watch": "npm run test -- --watchAll"
},
"dependencies": {
"#types/jest": "^26.0.8",
"#types/node": "^14.0.27",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.10.1",
"react-native-responsive-screen": "^1.4.1",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "^2.9.0",
"react-native-web": "~0.11.7",
"react-test-renderer": "^16.13.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#testing-library/jest-native": "^3.3.0",
"#testing-library/react-native": "^7.0.1",
"#types/react": "~16.9.41",
"#types/react-native": "~0.62.13",
"jest": "^26.2.2",
"typescript": "~3.9.5",
"jest-expo": "^38.0.0"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
hope this will help you
I am new to ReactNative world,
I am using ReactCLI (No Expo)
My Code running fine on Android Simulator, but don't know why it is not executing on WEB. (See attachment). I am using Windows 10.
Additionally,
I got URL (why my code not run in react-native code in web) that saying - It doesn't work. But as per the FACEBOOK guideline "React Native is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities."
So, what I am missing??
Below is my Package.JSON
"scripts": {
"android": "npx react-native run-android",
"ios": "react-native run-ios",
"start": "npx react-native start --reset-cache",
"test": "jest",
"lint": "eslint .",
"build-android": "cd ./android && ./gradlew clean && ./gradlew assembleRelease"
},
"pre-commit": [
"lint"
],
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.8.0",
"#react-navigation/native": "^5.4.3",
"#react-navigation/stack": "^5.4.0",
"axios": "^0.19.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^2.0.3",
"react-native-screens": "^2.8.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-unimodules": "^0.9.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.3.9"
},
"devDependencies": {
"#babel/core": "^7.10.0",
"#babel/runtime": "^7.10.0",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.1.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"pre-commit": "^1.2.2",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I am new to react-native and creating apk using command sudo react-native run-android --variant=release app is working fine on usb debbuging, but when i am creating apk and run it on mobile device it gives error alert box
{"line":132,"column":7285,"sourceURL":"index.android.bundle"}
I am sharing package.json and babel.config.json
{
"name": "ReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#bam.tech/react-native-snap-carousel": "^3.2.3",
"#react-native-community/datetimepicker": "^2.2.2",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/drawer": "^5.1.0",
"#react-navigation/native": "^5.0.2",
"#react-navigation/stack": "^5.0.2",
"#twotalltotems/react-native-otp-input": "^1.2.0",
"core-js": "^3.6.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-app-intro-slider": "^3.0.0",
"react-native-bootsplash": "^0.1.0",
"react-native-countdown-component": "^2.6.0",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^5.5.3",
"react-native-drawer": "^2.5.1",
"react-native-gesture-handler": "^1.6.0",
"react-native-image-picker": "^2.3.1",
"react-native-interactive-image-gallery": "^0.1.2",
"react-native-masonry-list": "^2.16.1",
"react-native-material-dialog": "^0.7.7",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^11.5.4",
"react-native-modal-datetime-picker": "^8.5.1",
"react-native-modal-dropdown": "^0.7.0",
"react-native-modals": "^0.19.9",
"react-native-photo-upload": "^1.3.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2",
"react-native-snap-carousel": "^3.8.4",
"react-native-sqlite-storage": "^4.1.0",
"react-native-tab-view": "^2.13.0",
"react-native-textarea": "^1.0.3",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.1.1",
"react-navigation-drawer": "^2.3.4"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^0.0.7",
"babel-jest": "^25.1.0",
"eslint": "^6.8.0",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
and babel.config.json
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
If you are using APIs call in the android and uses HTTP calls which is not secure then this problem will occur in Android API >= 28.
This problem comes in API < 28 but android handles it but now after API 28 they are not handling it rather want developers to use HTTPS api calls for added security. As android versions are coming they are more towards security.
But if you still want to use HTTP API calls in your android app, be it in react native or any other you have to add this in androidmanifest.xml file
<application
android:usesCleartextTraffic="true"
.......>
</application>
The value of usesCleartextTraffic is by default set to false in API > 28.So we have to manually set it to true to make it working.
Im trying to run this React native app and after installing its dependencies (npm install) and running the app with react-native run-android I am getting this error:
After googling this error I found this: Solution attempt
Which says that I should upgrade the material-ui library.
After updating to the version 1.30.1 of the library I get the same error.
Here is my package.json:
{
"name": "name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^0.0.11",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-drawer-layout-polyfill": "^2.0.0",
"react-native-fbsdk": "^0.7.0",
"react-native-gesture-handler": "^1.0.0-alpha.41",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-maps": "^0.17.1",
"react-native-material-dropdown": "^0.7.1",
"react-native-material-ui": "^1.30.1",
"react-native-modal-datetime-picker": "^5.1.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-star-rating": "^1.0.8",
"react-native-tab-view": "0.0.70",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "4.8.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.1.4",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./fuentes/"
]
}
}
What can I do to fix this error?
To fix this I updated my React and React Native versions to the latest available.
I have created a React Native App. Currently, I have just created views of the app, no redux as of now. Everything is hardcoded. I have mainly used Cards, Grid, List Views.
I am using native-base for designing purpose in my whole app. I contains SideMenu as well which I have created using Drawer of Native Base.
I am using react-native-router-flux for navigation.
I am using react native 0.52.2.
My App is working really very slowly (taking around 2-3 seconds to navigate) when I am keeping Cards, Grids, ListView on the Pages. If I remove these & just do navigation between pages using Buttons or Side Menu, the App is working fine. I have tested App in Android & iOS real devices & with release build in both the platforms.
Below is my package.json:
{
"name": "Test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^4.17.4",
"native-base": "^2.3.5",
"react": "16.2.0",
"react-native": "0.52.2",
"react-native-action-button": "^2.8.4",
"react-native-datepicker": "^1.6.0",
"react-native-easy-grid": "^0.1.17",
"react-native-modal": "^5.0.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-splash-screen": "^3.0.6",
"react-native-table-component": "^1.1.3",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.1.4",
"react-test-renderer": "16.2.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}