DEVHIDE
Login Or Sign up

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

539 Views Asked by At

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

React: 18.2.0 React Native: 0.72.4 Redux: 4.2.1 React Redux: 8.1.2

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?

What is the expected behavior? Jest snapshots tests can be passed successfully

Which browser and OS are affected by this issue? Jest

react-native react-redux snapshot babel-jest react-test-renderer
Original Q&A
1

There are 1 best solutions below

0
Mister_CK On

Is suspect that when you run this test in isolation it still succeeds without issue?

When I got the error 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. it was because I had async behaviour in tests that I didn't await. Every test that renders something that does async calls. Otherwise what happens is that that test is still running in the background while a different test has started. It then fails, because it is doing something while the environment has been torn down. The failure message is shown for a different test, because that test is the test that was running in the foreground at the time.

To solve it, I had to go through all my test and make them run async and end them with

await waitFor(()=> {expect(something).toBeSomething()}) //where something is something relevant that happens at the end of your test.

Alternatively: The issue might be with jest.useFakeTimers(). You might be using those incorrectly, this might help: ReferenceError: You are trying to `import` a file after the Jest environment has been torn down

PS: please format your code for readability.

Related Questions in REACT-NATIVE

Related Questions in REACT-REDUX

Related Questions in SNAPSHOT

Related Questions in BABEL-JEST

Related Questions in REACT-TEST-RENDERER

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.