Jest tests break after upgrading to react-native 0.58 - react-native

all my test using react-test-renderer or enzyme break after upgrading to react-native 0.58.6
Errors I got are e.g.
TypeError: Cannot read property 'default' of undefined
Expected value to be truthy, instead received undefined
TypeError: Cannot read property 'dive' of undefined
TypeError: Cannot read property 'find' of undefined
Has someone experienced a similar behaviour? I tried different versions of enzyme, or jest but hat no luck.
my dependencies:
"dependencies": {
"firebase": "^5.9.0",
"prop-types": "^15.6.0",
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-code-push": "^5.5.2",
"react-native-image-picker": "^0.28.0",
"react-native-keychain": "^3.0.0",
"react-native-paper": "^1.12.0",
"react-native-vector-icons": "^6.4.1",
"react-navigation": "^1.6.1",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"yarn": "^1.9.4"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-jest": "^23.6.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.12.3",
"husky": "^0.14.3",
"jest": "^23.6.0",
"jest-fetch-mock": "^2.1.0",
"lint-staged": "^7.2.2",
"metro-react-native-babel-preset": "^0.53.1",
"prettier": "1.10.2",
"react-dom": "^16.7.0",
"react-test-renderer": "^16.7.0",
"redux-mock-store": "^1.5.3"
},
"jest": {
"preset": "react-native",
"setupFiles": ["<rootDir>/tests/setup.js"],
"collectCoverageFrom": ["app/**/*.js", "!app/components/index.js"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
}
reproducer
https://github.com/defrian/TestProject.git

I solved the issue by removing
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
from the package.json
solution found here https://github.com/facebook/react-native/issues/22175#issuecomment-474786382
i also added/updated some dev dependencies:
"babel-core": "^7.0.0-bridge.0", (new)
"babel-jest": "24.5.0", (from "^23.6.0")
"enzyme": "^3.9.0", (from "^3.8.0")
"enzyme-adapter-react-16": "^1.11.2", (from "^1.7.1")
"jest": "^24.5.0", (from "^23.6.0")
"react-test-renderer": "^16.8.4", (from "^16.7.0")

Related

Redux-Persist not working on React-native#0.60.4

I have been using redux-persist for about 6 months, it never happened but this time in my new project redux-persist is not working I don't know what's the reason. Please note that I cannot downgrade as I'll have to re-eject the project and I can't do that. Need a quick fix.
Any help will be appreciated. Thanks.
My Package.json
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.5.1",
"native-base": "2.12.1",
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-animatable": "^1.3.2",
"react-native-calendar-picker": "^6.0.1",
"react-native-calendar-strip": "^1.3.8",
"react-native-calendars": "^1.200.0",
"react-native-document-picker": "^3.2.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.0.1",
"react-native-linear-gradient": "^2.5.4",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-permissions": "^1.2.0",
"react-native-progress-bar-animated": "^1.0.6",
"react-native-ratings": "^6.3.1",
"react-native-render-html": "^4.1.2",
"react-native-scaling-drawer": "^1.0.1",
"react-native-snap-carousel": "^3.8.0",
"react-native-splash-screen": "^3.2.0",
"react-native-star-rating": "^1.1.0",
"react-native-toast": "^1.0.1",
"react-native-vector-icons": "^6.6.0",
"react-native-wheel-picker-android": "^2.0.5",
"react-navigation": "^3.11.1",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-persist": "5.6.12",
"redux-thunk": "^2.3.0",
"rn-range-slider": "^1.2.5"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I was able to resolve this issue by adding "persist/REHYDRATE" action in my reduces, However I have no idea what this action does but resolved my issue
case "persist/REHYDRATE":{
return{
...action.payload.global
}
}
Where global is the name of my reduces

Cannot read property 'ScrollView' of undefined on React-Native and React-Navigation 3.x

When I follow the instruction from https://reactnavigation.org/docs/en/getting-started.html
and run the application, I have this error
Requiring module "node_modules/react-native-gesture-handler/index.js", which threw an exception: TypeError:
"dependencies": {
"react": "^16.8.6",
"react-art": "^16.6.3",
"react-dom": "16.8.6",
"react-native": "^0.59.8",
"react-native-gesture-handler": "^1.2.2",
"react-native-modal-selector": "^1.0.3",
"react-native-vector-icons": "^6.1.0",
"react-native-web": "0.11.2",
"react-navigation": "^3.0.0"
},
"resolutions": {
"uglify-es": "3.2.2"
},
"devDependencies": {
"#types/jest": "24.0.12",
"#types/node": "^10.12.12",
"#types/react": "16.8.15",
"#types/react-dom": "^16.0.11",
"#types/react-native": "^0.57.60",
"#types/react-navigation": "^3.0.7",
"#types/react-test-renderer": "16.8.1",
"babel-jest": "24.7.1",
"jest": "24.7.1",
"metro-react-native-babel-preset": "0.50.0",
"prettier": "1.17.0",
"react-art": "16.8.6",
"react-native-typescript-transformer": "^1.2.10",
"react-scripts": "3.0.0",
"react-scripts-ts": "^3.1.0",
"react-test-renderer": "16.8.6",
"ts-jest": "24.0.2",
"tslint": "5.16.0",
"tslint-config-prettier": "1.18.0",
"typescript": "3.4.5"
},
You need to install react-native-gesture-handler package to make it works npm install --save react-native-gesture-handler and link it.
Complete installation guide can be found here: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Error: Plugin/Presets are not allowed to export objects, only functions. After update to react native 0.57

I am trying to upgrade my app from react native 0.56 to 0.57.3, but I'm getting the following issue when my app is loading:
error: bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/babel-preset-react-native/index.js
at createDescriptor (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:315:26)
at /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:278:7
at mergeExtendsChain (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:294:21)
I have tried deleting node_modules, cleaning the build folder, etc.
My package.json file is:
"dependencies": {
"axios": "^0.18.0",
"date-fns": "^1.29.0",
"lodash.intersection": "^4.4.0",
"lodash.isempty": "^4.4.0",
"lodash.pick": "^4.4.0",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"react": "16.5",
"react-native": "0.57.3",
"react-native-actionsheet": "^2.4.2",
"react-native-code-push": "^5.4.2",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^0.19.1",
"react-native-geolocation-service": "^1.1.0",
"react-native-i18n": "^2.0.12",
"react-native-image-picker": "^0.26.10",
"react-native-map-link": "^2.0.1",
"react-native-maps": "git+https://github.com/otaviogaiao/react-native-maps#master",
"react-native-maps-super-cluster": "git+https://github.com/otaviogaiao/react-native-maps-super-cluster.git#1.4.2",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^6.5.0",
"react-native-nested-scroll-view": "^7.0.0",
"react-native-responsive-screen": "^1.1.6",
"react-native-splash-screen": "3.0.9",
"react-native-sqlite-storage": "^3.3.5",
"react-native-text-input-mask": "^0.7.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "2.0.4",
"react-navigation-redux-helpers": "1.1.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.0",
"remove-accents": "^0.4.2",
"rn-fetch-blob": "^0.10.13",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"jest": "22.4.4",
"metro-react-native-babel-preset": "^0.45.0",
"prettier": "1.12.1",
"prettier-eslint": "^8.8.1",
"react-test-renderer": "16.5"
},
and this is my .babelrc file:
{
"presets": [
"react-native",
"module:metro-react-native-babel-preset"
],
"env": {
"development": {
"plugins": [
"#babel/plugin-transform-react-jsx-source"
]
}
},
"retainLines": true
}
I looked around for answers, but couldn't find anything that helped me.
Any help is appreciated.

ReactNative 0.57 build IOS Cannot read property 'filename' of undefined (null))

Error screenshot
Error log on server
package.json code
"dependencies": {
"#babel/plugin-external-helpers": "^7.0.0",
"#types/events": "^1.2.0",
"#types/prop-types": "^15.5.5",
"#types/query-string": "^6.1.0",
"#types/react": "^16.4.14",
"#types/react-native": "^0.56.23",
"#types/react-native-drawer-layout": "^1.3.5",
"#types/react-navigation": "^2.0.21",
"antd-mobile-rn": "^2.2.1",
"axios": "^0.18.0",
"babel-plugin-import": "^1.9.1",
"events": "^3.0.0",
"mobx": "4.3.1",
"mobx-react": "^5.2.8",
"moment": "^2.22.2",
"query-string": "^6.1.0",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-keyboard-aware-scroll-view": "^0.7.2",
"react-native-simple-radio-button": "^2.7.3",
"react-native-swipeout": "^2.3.6",
"react-navigation": "^2.16.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.4",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
Check your .babelrc file it must have something like this
{
"presets": ["module:metro-react-native-babel-preset"]
}

Plugin/Preset files are not allowed to export objects, only functions

I'm getting this error after updating react-native to "^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
I tried to do something similar to the highest voted answer here but instead for babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "#babel/preset-flow"]
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"#babel/preset-flow": "^7.0.0-beta.52",
"#babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
"react-native-fbsdk": "facebook/react-native-fbsdk#065507a",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"react-native-interactable": "^0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.7",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.72.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
Nothing is working. Any ideas?
EDIT: there is no node_modules/babel-preset-flow folder at all
I had the same error and resolved it by uninstalling babel-preset-flow and installing #babel/preset-flow. I believe this is due to React Native 56 using Babel 7. And add to .babelrc
{
"presets": ["#babel/preset-flow"]
}
Upgrade your babel-preset-react-native dependency.
"babel-preset-react-native": "^5",
You don't need to have #babel/preset-react or #babel/preset-flow installed.
Hope this helps.
Open .babelrc file and then edit the presets section of the code as follows:
"presets": ["module:metro-react-native-babel-preset"],
I solved this issue by installing "babel-preset-react-native-stage-0" in my project and changed .babelrc file:
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
]
for Babel 7 and above and according to this document create a file with name bable.config.js instead of .babelrc and then export presets like this :
const presets = [
"flow"
]
module.exports = {presets}