将 React Native 版本从 0.70.13 更新到 0.72.4 后,Jest Snapshot 测试失败

问题描述 投票:0回答:1

更新我的 React Native 版本后,当我运行玩笑测试时,我不断收到错误,它与 React Redux 连接组件的快照测试有关

反应:18.2.0 反应本机:0.72.4 终极版:4.2.1 React Redux:8.1.2

例如: 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"
},

我不断收到此错误:

/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

有人可以帮忙看一下吗?

预期的行为是什么? Jest快照测试可以顺利通过

哪些浏览器和操作系统受此问题影响? 开玩笑

react-native react-redux snapshot babel-jest react-test-renderer
1个回答
0
投票

是否怀疑当您单独运行此测试时,它仍然会成功而没有问题?

当我收到错误时

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.
,这是因为我在测试中出现了异步行为,但我没有等待。每个渲染执行异步调用的测试。否则,会发生的情况是该测试仍在后台运行,而另一个测试已经开始。然后它就会失败,因为它正在做一些事情,而环境已经被破坏了。针对不同的测试显示失败消息,因为该测试是当时在前台运行的测试。

为了解决这个问题,我必须完成所有测试并让它们异步运行并以

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

或者: 问题可能出在 jest.useFakeTimers() 上。您可能错误地使用了这些内容,这可能会有所帮助:ReferenceError:您正在尝试在 Jest 环境被拆除后“导入”文件

PS:请格式化您的代码以方便阅读。

© www.soinside.com 2019 - 2024. All rights reserved.