search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.41k stars 24.25k forks source link

Jest Snapshot tests failed after updating react native versions from 0.70.13 to 0.72.4 #39518

Closed hellforever closed 1 year ago

hellforever commented 1 year ago

New Version

0.72.4

Old Version

0.70.13

Build Target(s)

Jest test

Output of react-native info

System: OS: macOS 13.5.2 CPU: (10) arm64 Apple M1 Pro Memory: 182.03 MB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: ~/.nvm/versions/node/v18.17.1/bin/node Yarn: Not Found npm: version: 9.6.7 path: ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: version: 2023.05.22.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/fepc-1014w/.rbenv/shims/pod SDKs: iOS SDK: Platforms:

Issue and Reproduction Steps

After Updating my react native version, I am keeping getting errors when I run the jest tests, it is regarding the snapshot tests for react redux connected components

ex: ContractDetail.js `// React import React from 'react' import { Provider } from 'react-redux'

// Test import renderer from 'react-test-renderer'

// Store import { getMockedStore } from 'test/store/utils/storeTest'

// Components import ContractDetail from 'views/harvest/components/contract/ContractDetail'

// Constants import { COMMODITY_CONTRACT_ID_1 } from 'test/store/data/commodityContractDataTest'

describe('ContractDetail Tests', () => { it('ContractDetail renders correctly with snapshot', () => { const tree = renderer .create(

  )
  .toJSON()
expect(tree).toMatchSnapshot()

}) }) storeTest.js // Test import configureStore from 'redux-mock-store'

// Store import store from 'test/store/data'

const mockStore = configureStore() const mockedStore = mockStore(store)

export const getMockedStore = (state) => (state ? mockStore(state) : mockedStore) package.json "dependencies": { "@bankify/redux-persist-realm": "0.1.3", "@farmersedge/react-native-geojson-to-svg": "1.1.3", "@google-cloud/translate": "4.1.3", "@react-native-async-storage/async-storage": "1.19.3", "@react-native-community/art": "1.2.0", "@react-native-community/geolocation": "2.0.2", "@react-native-community/netinfo": "9.3.7", "@react-native-community/progress-bar-android": "1.0.4", "@react-native-community/progress-view": "1.3.1", "@react-native-community/slider": "2.0.9", "@react-native-firebase/analytics": "14.3.1", "@react-native-firebase/app": "14.3.1", "@react-native-firebase/crashlytics": "14.3.1", "@react-native-firebase/messaging": "14.3.1", "@react-native-firebase/perf": "14.3.1", "@react-native-mapbox-gl/maps": "8.4.0", "@turf/boolean-crosses": "6.0.1", "@turf/center-of-mass": "6.0.1", "@turf/turf": "5.1.6", "@welldone-software/why-did-you-render": "4.2.1", "array-flat-polyfill": "1.0.1", "art": "0.10.3", "assert": "2.0.0", "base64-image-loader": "1.2.1", "buffer": "5.6.0", "convert-units": "github:granduke/cab-convert-units#v2.3.4", "d3": "5.9.7", "d3-array": "2.2.0", "d3-scale": "3.0.0", "d3-shape": "1.3.5", "deprecated-react-native-prop-types": "2.3.0", "fbjs": "3.0.2", "geojson": "0.5.0", "geojson-tools": "0.2.2", "geostats": "github:simogeo/geostats", "lodash": "4.17.15", "memoize-one": "5.0.5", "moment": "2.24.0", "moment-timezone": "0.5.26", "native-fetch": "github:granduke/native-fetch", "react": "18.2.0", "react-native": "0.72.4", "react-native-base64": "0.0.2", "react-native-ble-plx": "2.0.3", "react-native-blob-util": "0.16.4", "react-native-calendars": "1.1291.1", "react-native-collapsible": "1.4.0", "react-native-config": "1.4.1", "react-native-device-info": "10.3.0", "react-native-floating-action": "1.22.0", "react-native-i18n": "github:granduke/react-native-i18n", "react-native-image-picker": "github:granduke/react-native-image-picker-all#react-native-custom-image-picker", "react-native-mapbox-drawing-tools": "github:granduke/react-native-mapbox-drawing-tools", "react-native-material-design": "github:granduke/react-native-material-design#CAB-6032", "react-native-material-design-styles": "github:react-native-material-design/react-native-material-design-styles", "react-native-navigation": "7.37.0", "react-native-pager-view": "5.4.9", "react-native-pdf": "6.6.2", "react-native-permissions": "3.2.0", "react-native-svg": "9.5.3", "react-native-switch": "2.0.0", "react-native-tab-view": "3.1.1", "react-native-uuid": "2.0.1", "react-native-vector-icons": "10.0.0", "react-native-view-shot": "3.1.2", "react-native-zip-archive": "5.0.6", "react-redux": "8.1.2", "realm": "12.1.0", "redux": "4.2.1", "redux-loop": "5.0.0", "redux-persist": "6.0.0", "redux-saga": "1.2.3", "reselect": "4.1.8", "supercluster": "4.1.1", "sync-storage": "0.4.2" }, "rnpm": { "assets": [ "./assets/fonts" ] }, "devDependencies": { "@babel/cli": "7.14.8", "@babel/core": "7.20.12", "@babel/node": "7.14.9", "@babel/plugin-proposal-export-default-from": "7.18.10", "@babel/plugin-transform-flow-strip-types": "7.22.5", "@babel/plugin-transform-private-methods": "7.22.5", "@babel/preset-env": "7.20.2", "@babel/runtime": "7.20.13", "@commitlint/cli": "8.3.5", "@commitlint/config-conventional": "8.3.4", "@react-native/eslint-config": "0.72.2", "@react-native/metro-config": "0.72.11", "@tsconfig/react-native": "3.0.0", "@types/react": "18.2.21", "@types/react-test-renderer": "18.0.1", "babel-eslint": "10.0.2", "babel-jest": "29.7.0", "babel-plugin-module-resolver": "4.1.0", "babel-plugin-transform-runtime": "6.23.0", "danger": "11.2.0", "detox": "18.16.0", "eslint": "8.19.0", "eslint-config-standard": "13.0.1", "eslint-config-standard-jsx": "7.0.0", "eslint-config-standard-react": "8.0.0", "eslint-plugin-babel": "5.3.0", "eslint-plugin-import": "2.25.2", "eslint-plugin-node": "9.1.0", "eslint-plugin-prettier": "3.1.0", "eslint-plugin-promise": "4.2.1", "eslint-plugin-react": "7.33.2", "eslint-plugin-standard": "4.0.0", "fetch-mock": "7.3.9", "flow-bin": "0.103.0", "form-data": "2.5.0", "glob": "7.1.4", "googleapis": "41.0.1", "husky": "3.0.1", "i18n-js": "3.3.0", "jest": "29.7.0", "jetifier": "2.0.0", "lint-staged": "9.2.0", "metro-react-native-babel-preset": "0.76.8", "node-fetch": "2.6.0", "patch-package": "8.0.0", "precise-commits": "1.0.2", "prettier": "2.4.1", "prettier-eslint": "9.0.0", "prettier-eslint-cli": "5.0.0", "prop-types": "15.7.2", "react-native-mock": "0.3.1", "react-native-schemes-manager": "2.0.0", "react-test-renderer": "18.2.0", "reactotron-react-native": "5.0.3", "reactotron-redux": "3.1.3", "reactotron-redux-saga": "4.2.3", "readline-sync": "1.4.9", "redux-mock-store": "1.5.4", "redux-saga-test-plan": "4.0.6", "rimraf": "2.6.3", "schedule": "0.5.0", "typescript": "4.8.4" }, `

And I am keeping getting this error: `/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1772 throw error; ^

TypeError: require(...).unstable_batchedUpdates is not a function at unstable_batchedUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/Libraries/ReactNative/RendererImplementation.js:44:51) at Object.notify (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/utils/Subscription.js:16:7) at Object.notifyNestedSubs (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/utils/Subscription.js:76:15) at checkForUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:112:9) at subscribeUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:123:3) at subscribe (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:254:18) at subscribeToStore (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4747:14) at commitHookEffectListMount (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8822:30) at commitPassiveMountOnFiber (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9836:15) at commitPassiveMountEffects_complete (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9803:13) at commitPassiveMountEffects_begin (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9793:11) at commitPassiveMountEffects (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9783:7) at flushPassiveEffectsImpl (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10947:7) at flushPassiveEffects (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10907:18) at /Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10811:13 at workLoop (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:197:38) at flushWork (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:176:18) at Immediate.performWorkUntilDeadline (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:382:25) at processImmediate (node:internal/timers:476:21)

Node.js v18.17.1

ReferenceError: You are trying to import a file after the Jest environment has been torn down. From src/views/harvest/components/contract/test/ContractDetail.test.js.

  at unstable_batchedUpdates (node_modules/react-native/Libraries/ReactNative/RendererImplementation.js:44:10)
  at Object.notify (node_modules/react-redux/lib/utils/Subscription.js:16:7)
  at Object.notifyNestedSubs (node_modules/react-redux/lib/utils/Subscription.js:76:15)
  at checkForUpdates (node_modules/react-redux/lib/components/connect.js:112:9)
  at subscribeUpdates (node_modules/react-redux/lib/components/connect.js:123:3)
  at subscribe (node_modules/react-redux/lib/components/connect.js:254:18)
  at subscribeToStore (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4747:14)
  at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8822:30)
  at commitPassiveMountOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9836:15)
  at commitPassiveMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9803:13)
  at commitPassiveMountEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9793:11)
  at commitPassiveMountEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9783:7)
  at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10947:7)
  at flushPassiveEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10907:18)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10811:13
  at workLoop (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:197:38)
  at flushWork (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:176:18)
  at Immediate.performWorkUntilDeadline [as _onImmediate] (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:382:25)

console.error The above error occurred in the <Connect(OverlayModal)> component:

    at ConnectFunction (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:187:34)
    at AlertOverlay (/Users/fepc-1014w/workspace/FE_Cab/src/components/Dialogs/AlertOverlay.js:27:34)
    at View
    at Component (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockComponent.js:22:36)
    at ManagementPanel (/Users/fepc-1014w/workspace/FE_Cab/src/components/Details/ManagementPanel.js:47:34)
    at View
    at Component (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockComponent.js:22:36)
    at RCTScrollView
    at Component (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockNativeComponent.js:23:36)
    at ScrollViewMock (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockScrollView.js:21:36)
    at RCTSafeAreaView
    at Component (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockNativeComponent.js:23:36)
    at ContractDetail (/Users/fepc-1014w/workspace/FE_Cab/src/views/harvest/components/contract/ContractDetail.js:92:34)
    at _class (/Users/fepc-1014w/workspace/FE_Cab/src/models/utils/index.js:33:38)
    at ConnectFunction (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:187:34)
    at Provider (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/Provider.js:49:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

  at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6148:27)
  at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6168:9)
  at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2807:16)
  at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2824:13)
  at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8999:17)
  at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9762:13)
  at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9751:11)
  at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9740:7)
  at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10833:9)
  at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10766:9)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10448:7)
  at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1762:26)
  at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10957:7)
  at flushPassiveEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10907:18)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10811:13
  at workLoop (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:197:38)
  at flushWork (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:176:18)
  at Immediate.performWorkUntilDeadline [as _onImmediate] (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:382:25)

console.error The above error occurred in the <Connect(OverlayModal)> component:

    at ConnectFunction (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:187:34)
    at AlertOverlay (/Users/fepc-1014w/workspace/FE_Cab/src/components/Dialogs/AlertOverlay.js:27:34)
    at RCTSafeAreaView
    at Component (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/jest/mockNativeComponent.js:23:36)
    at ContractDetail (/Users/fepc-1014w/workspace/FE_Cab/src/views/harvest/components/contract/ContractDetail.js:92:34)
    at _class (/Users/fepc-1014w/workspace/FE_Cab/src/models/utils/index.js:33:38)
    at ConnectFunction (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:187:34)
    at Provider (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/Provider.js:49:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

  at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6148:27)
  at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6168:9)
  at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2807:16)
  at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2824:13)
  at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8999:17)
  at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9762:13)
  at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9751:11)
  at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9740:7)
  at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10833:9)
  at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10766:9)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10448:7)
  at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1762:26)
  at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10957:7)
  at flushPassiveEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10907:18)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10811:13
  at workLoop (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:197:38)
  at flushWork (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:176:18)
  at Immediate.performWorkUntilDeadline [as _onImmediate] (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:382:25)

/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1772 throw error; ^

TypeError: require(...).unstable_batchedUpdates is not a function at unstable_batchedUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-native/Libraries/ReactNative/RendererImplementation.js:44:51) at Object.notify (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/utils/Subscription.js:16:7) at Object.notifyNestedSubs (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/utils/Subscription.js:76:15) at checkForUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:112:9) at subscribeUpdates (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:123:3) at subscribe (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-redux/lib/components/connect.js:254:18) at subscribeToStore (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4747:14) at commitHookEffectListMount (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8822:30) at commitPassiveMountOnFiber (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9836:15) at commitPassiveMountEffects_complete (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9803:13) at commitPassiveMountEffects_begin (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9793:11) at commitPassiveMountEffects (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9783:7) at flushPassiveEffectsImpl (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10947:7) at flushPassiveEffects (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10907:18) at /Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10811:13 at workLoop (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:197:38) at flushWork (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:176:18) at Immediate.performWorkUntilDeadline (/Users/fepc-1014w/workspace/FE_Cab/node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:382:25) at processImmediate (node:internal/timers:476:21)

Node.js v18.17.1 FAIL src/views/harvest/components/contract/test/ContractDetail.test.js` ``

Can someone helps take a look at this?

github-actions[bot] commented 1 year ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
github-actions[bot] commented 1 year ago
:warning: Issue is a Question
:information_source: We are using GitHub issues exclusively to track bugs in the core React Native library. Please try asking over on Stack Overflow as it is better suited for this type of question.
hellforever commented 1 year ago

https://stackoverflow.com/questions/77134335/jest-snapshot-tests-failed-after-updating-react-native-versions-from-0-70-13-to