React-native-tab-view: PrettyFormatPluginError: Invalid string lengthRangeError when snapshotting TabBar

[jfaverie]

Current behaviour

When i try snapshoting with react-native-testing-library a page containing a TabView with the renderTabBar prop returning the TabBar component, react-native-testing-library raises an error as follow

PrettyFormatPluginError: Invalid string lengthRangeError: Invalid string length

      at printObjectProperties (node_modules/pretty-format/build/collections.js:172:47)
      at printComplexValue (node_modules/pretty-format/build/index.js:289:48)
      at printer (node_modules/pretty-format/build/index.js:372:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:289:48)
      at printer (node_modules/pretty-format/build/index.js:372:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:289:48)
      at printer (node_modules/pretty-format/build/index.js:372:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)

Expected behaviour

The test should not fail. I had to mock TabBar for the snapshot not to fail

const React = jest.requireActual('react');
const RNTabView = jest.requireActual('react-native-tab-view');
export const TabBar = (props)=> {
  return React.createElement('TabBar', props);
}

module.exports = {...RNTabView, TabBar };

Code sample

For Syntax Highlighting check this link

js return ( <TabView renderTabBar={props => <TabBar {...props}></TabBar>} navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} /> );

What have you tried

When i mocked TabBar as shown before, the error does not appear anymore

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | ios
| expo | no
| react-native | 0.62.2
| react-native-tab-view | 2.15.2
| react-native-gesture-handler | 1.6.1
| react-native-reanimated | 1.7.1
| node | 15.3.0
| npm or yarn | yarn 1.22.10
| react-native-testing-library | 1.13.2

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.62.2, latest: 0.63.4)
• react-native-gesture-handler (found: 1.6.1, latest: 1.9.0)
• react-native-reanimated (found: 1.7.1, latest: 1.13.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[margaridaDinis]

FYI, updating the libraries suggested by the bot doesn't solve the issue

[MathieuFedrigo]

I experienced the same issue.

Going back to version "2.11.0" for "react-native-tab-view" fixed it for me.

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | ios
| expo | no
| react-native | 0.63.3
| react-native-tab-view | 2.11.0
| react-native-gesture-handler | 1.9.0
| react-native-reanimated | 1.13.2
| node | 12.19.0
| npm or yarn | yarn 1.22.10

[dmaulick]

Any update on this?

[dmaulick]

Seeing the same issue but would like to upgrade!