PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
829 stars 160 forks source link

Infinite re-rendering in unit tests. #240

Open alekhinen opened 2 years ago

alekhinen commented 2 years ago

Hello,

My team has integrated this library into one of our applications and have run into a bug with jest unit tests that we need help with. The primary problem seems to be some kind of infinite re-rendering inside Tab.tsx and Container.tsx.

I've followed the test setup guidance provided here: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/235 (seems based off of https://reactnavigation.org/docs/testing#mocking-native-modules) and https://docs.swmansion.com/react-native-reanimated/docs/guide/testing.

I've made a boilerplate react native typescript app with test examples covering the issue. See the following test cases: https://github.com/alekhinen/collapsible-tabs-rn-app/blob/main/__tests__/Collapsible.test.tsx#L8-L26. The <Collapsible /> component comes straight from the example in the README provided.

Here's a stack trace that's come up frequently in a separate project I'm working on:

    Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
        at FlatListImpl (/Users/n/node_modules/react-native-collapsible-tab-view/lib/commonjs/FlatList.tsx:29:3)
        at ShowList (/Users/n/src/core/creator/ShowList.tsx:55:21)
        at Tab (/Users/n/node_modules/react-native-collapsible-tab-view/lib/commonjs/Tab.tsx:25:42)
        at View
        at View (/Users/n/node_modules/react-native/jest/mockComponent.js:28:18)
        at VirtualizedListCellContextProvider (/Users/n/node_modules/react-native/Libraries/Lists/VirtualizedListContext.js:140:3)
        at CellRenderer (/Users/n/node_modules/react-native/Libraries/Lists/VirtualizedList.js:1384:34)
        at View
        at View (/Users/n/node_modules/react-native/jest/mockComponent.js:28:18)
        at RCTScrollView
        at RCTScrollView (/Users/n/node_modules/react-native/jest/mockNativeComponent.js:15:18)
        at ScrollView (/Users/n/node_modules/react-native/jest/mockScrollView.js:21:52)
        at VirtualizedListContextProvider (/Users/n/node_modules/react-native/Libraries/Lists/VirtualizedListContext.js:93:3)
        at VirtualizedList (/Users/n/node_modules/react-native/Libraries/Lists/VirtualizedList.js:680:29)
        at FlatList (/Users/n/node_modules/react-native/Libraries/Lists/FlatList.js:407:36)
        at View
        at View (/Users/n/node_modules/react-native/jest/mockComponent.js:28:18)
        at /Users/n/node_modules/react-native-collapsible-tab-view/lib/commonjs/Container.tsx:63:7
        at ApolloProvider (/Users/n/node_modules/@apollo/client/react/context/ApolloProvider.js:5:21)
        at MockedProvider (/Users/n/node_modules/@apollo/client/utilities/testing/mocking/MockedProvider.js:10:28)

Any help addressing this problem would be much appreciated!