I couldn't make Jest snapshot testing work in React native expo app. I am getting all kinds of errors depending on set of node modules and configuration.
Examples are:
* SyntaxError: Unexpected identifier import ... or about import React from another file,
* jest encountered an unexpected token import,
* Errors related to script_transformer .
Here is my package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"lint": "eslint .",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node_modules/.bin/jest"
},
"dependencies": {
"expo": "^31.0.0",
"moment": "^2.22.2",
"pouchdb-react-native": "^6.4.1",
"prop-types": "^15.6.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-easy-toast": "^1.1.0",
"react-native-range-datepicker": "^1.8.2",
"react-navigation": "^2.18.2",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-syntax-class-properties": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint": "^5.9.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^31.0.0",
"react-test-renderer": "^16.7.0"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(pouchdb-react-native|pouchdb-adapter-asyncstorage))"
]
}
}
Can someone point me to a working Repo of a React-native Expo app with Jest snapshot tests.
jest-expo has better snapshots supoport now,
check https://docs.expo.io/versions/latest/guides/testing-with-jest/#snapshot-test
Related
I am trying to launch a small react-native project(done with expo) in web browser and I keep getting this error
Failed to compile.
C:/Users/SUPPORT/AppData/Roaming/npm/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js
Error: [BABEL] C:\Users\SUPPORT\AppData\Roaming\npm\node_modules\expo-cli\node_modules\react-dev-utils\webpackHotDevClient.js: Cannot find module '#babel/core'
although I already installed babel and babel core
this is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo-google-fonts/inter": "^0.1.0",
"#react-native-community/toolbar-android": "github:react-native-community/toolbar-android",
"expo": "~37.0.3",
"expo-font": "^8.2.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-paper": "^3.6.0",
"react-native-vector-icons": "^6.7.0",
"react-native-web": "^0.11.7"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-preset-expo": "~8.1.0",
"webpack": "^4.43.0"
},
"private": true
}
project link:https://github.com/Mai9550/expo_template-react-native-
try to run
npm install #babel/core --save
I am getting an error that #react-navigation/native could not be found within the project. I tried to install it and my package.json file says. I am not sure what to do next to get it running. Cheers {
"name": "sample",
"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": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.5.1",
"#react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.4",
"react-native-screens": "^2.8.0"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/runtime": "^7.10.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I get that problem sometimes as well, when I restart the app the problem is gone. I don't know why it happens, though.
I'm new to React natives , i have this issue saying : Invariant Violation: ListView has been removed from React Native.
I'm not even using ListView on my project , i'll share with you my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"postinstall": "cp node_modules/#expo/vector-icons/FontAwesome.js node_modules/#expo/vector-icons/Fontisto.js"
},
"dependencies": {
"babel-plugin-inline-import": "^3.0.0",
"expo": "~37.0.3",
"idx": "^2.5.6",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-native-animatable": "^1.3.2",
"react-native-camera": "^2.11.0",
"react-native-country-picker-modal": "^0.7.1",
"react-native-gesture-handler": "^1.6.1",
"react-native-pose": "^0.9.1",
"react-native-reanimated": "^1.7.1",
"react-native-screens": "^2.2.0",
"react-native-tab-view": "^2.10.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"private": true
}
```
Thank you in advance.
ListView is a default Component.
You may use it in any Component.
It has been replaced by
new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features.
You can read over this here:
ListView
When I am running this command:
expo build:android
I am getting following errors:
Unable to resolve module `./index.css` from `node_modules\antd-mobile\lib\button\style\css.js`:
None of these files exist:
* node_modules\antd-mobile\lib\button\style\index.css(.native|.ios.expo.ts|.na
tive.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.nat
ive.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts
|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|
.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
* node_modules\antd-mobile\lib\button\style\index.css\index(.native|.ios.expo.
ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.j
s|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.nat
ive.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx
|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
Packager URL http://127.0.0.1:19001/node_modules\expo\AppEntry.bundle?dev=false&
minify=true&hot=false&platform=ios returned unexpected code 500. Please open you
r project in the Expo app and see if there are any errors. Also scroll up and ma
ke sure there were no errors or warnings when opening your project.
I have already done following:
npm cache verify
expo -r c
package.json file is as given below:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#babel/runtime": "^7.7.7",
"antd-mobile": "^2.3.1",
"babel-plugin-import": "^1.13.0",
"expo": "~36.0.0",
"rc-form": "^2.4.11",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-maps": "0.26.1",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.12",
"react-navigation-tabs": "^2.7.0",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
babel.config.js is as given below:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
"import",{ libraryName: "antd-mobile", style: "css" }
]
]
};
};
Im using expo.
here's my package.json file
{
"name": "emmunize",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "27.0.0",
"react-native-scripts": "^1.14.1",
"react-test-renderer": "16.3.0-alpha.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^6.3.1",
"expo": "^27.0.0",
"firebase": "^5.0.2",
"moment": "^2.22.2",
"native-base": "^2.5.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
"react-native-datepicker": "^1.7.2",
"react-native-router-flux": "^4.0.0-beta.32",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0"
}
}
I dont know what happened, when I try to exp start and exp android this error appeaars. I've followed the latest exp version 27 https://blog.expo.io/expo-sdk-v27-0-0-is-now-available-898bf1e5b0e4 but I think react-native-router-flux has an issue with the latest expo version?
I had the same problem when i was create a new project. As this is the new beta we should wait to the group can solve the bug.
Provisional Solution
Open terminal
Go to project path... Example: user/Documents/ReactNative/(name your project)/
run the command: npm remove react-native-router-flux
run the command: npm install react-native-router-flux#4.0.0-beta.28
run project again to try
react-native-router-flux#4.0.0-beta.28 is a version that i used in the last project and work fine.