PrettyFormatPluginError: Invalid string lengthRangeError when snapshotting Carousel

Is this a bug report, a feature request, or a question?

bug

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn't already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Not platform specific

Is the bug reproductible in a production environment (not a debug one)?

Only debug mode

Environment

Environment:
React: 17.0.1
React native: 0.64.0
react-native-snap-carousel: ^3.9.1

Expected Behavior

I'd like to make jest snapshots of my carousel UI.

Actual Behavior

I am getting the following error:

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:295:48)
      at printer (node_modules/pretty-format/build/index.js:378:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:295:48)
      at printer (node_modules/pretty-format/build/index.js:378:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:295:48)
      at printer (node_modules/pretty-format/build/index.js:378:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:171:21)

If I mock react-native-snap-carousel the test passes (currently commented in code).
Here is my test file:

/**
 * @format
 */

import 'react-native';
import React from 'react';
import {Tutorial1} from '../screens/Tutorial1';
import * as eva from '@eva-design/eva';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import {ApplicationProvider, IconRegistry} from '@ui-kitten/components';
import renderer from 'react-test-renderer';
jest.useFakeTimers();
jest.mock('@react-navigation/native');
// jest.mock('react-native-snap-carousel');

it('renders correctly', () => {
  const tree = renderer
    .create(
      <>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider {...eva} theme={eva.light}>
          <Tutorial1 />
        </ApplicationProvider>
      </>,
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

And my component:

import React, {useState, useRef, useEffect, useCallback} from 'react';
import {SafeAreaView, StyleSheet, View, Dimensions} from 'react-native';
import {
  Button,
  Divider,
  Icon,
  Layout,
  TopNavigation,
  TopNavigationAction,
  Text,
} from '@ui-kitten/components';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';

const GLOBAL = require('./components/constants');

export const Tutorial1 = ({navigation}) => {
  const BackIcon = props => <Icon {...props} name="chevron-left-outline" />;
  const [activeIndex, setActiveIndex] = useState(0);
  const [carouselItems, setCarouselItems] = useState(GLOBAL.CAROUSEL_ITEMS);
  const ref = useRef(null);
  const window = Dimensions.get('window');
  const CARD_WIDTH = window.width * 0.8;
  const CAROUSEL_WIDTH = window.width;
  const [isFirst, setIsFirst] = useState(false);
  const [isLast, setIsLast] = useState(false);

  const navigateBack = () => {
    navigation.goBack();
  };

  const goForward = () => {
    ref.current.snapToNext();
  };

  const goBack = () => {
    ref.current.snapToPrev();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
  );

  const renderItem = useCallback(({item, index}, parallaxProps) => {
    return (
      <View style={styles.intro_item}>
        <ParallaxImage
          source={item.thumbnail}
          containerStyle={styles.item_image_container}
          style={styles.item_image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />
        <Text style={styles.item_text} category="h6">
          {item.title}
        </Text>
        <Text style={styles.item_text}>{item.text}</Text>
      </View>
    );
  }, []);

  useEffect(() => {
    console.log(activeIndex);
    if (activeIndex == 0) {
      setIsFirst(true);
    } else if (activeIndex == 2) {
      setIsLast(true);
    } else {
      setIsFirst(false);
      setIsLast(false);
    }
  }, [activeIndex]);

  return (
    <SafeAreaView style={{flex: 1}}>
      <TopNavigation
        title="Intro"
        alignment="center"
        accessoryLeft={BackAction}
      />
      <Divider />
      <Layout style={styles.container} level="4">
        <Layout style={styles.intro} level="4">
          <Carousel
            layout={'default'}
            ref={ref}
            data={carouselItems}
            renderItem={renderItem}
            onSnapToItem={index => setActiveIndex(index)}
            sliderWidth={CAROUSEL_WIDTH}
            itemWidth={CARD_WIDTH}
            windowSize={1}
            hasParallaxImages={true}
            testID="carousel"
          />
        </Layout>

        <Layout style={styles.intro_bottom} level="4">
          {isFirst ? (
            <Button
              style={styles.intro_button}
              onPress={goBack}
              disabled={true}>
              Zurück
            </Button>
          ) : (
            <Button style={styles.intro_button} onPress={goBack}>
              Zurück
            </Button>
          )}

          {isLast ? (
            <Button
              style={styles.intro_button}
              onPress={() => navigation.navigate('Optionen wählen')}>
              Starten
            </Button>
          ) : (
            <Button style={styles.intro_button} onPress={goForward}>
              Weiter
            </Button>
          )}
        </Layout>
        <Layout style={styles.skip} level="4">
          <Text
            style={styles.skip_text}
            onPress={() => navigation.navigate('Optionen wählen')}>
            Überspringen
          </Text>
        </Layout>
      </Layout>
    </SafeAreaView>
  );
};

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. create react native app
2. added code above
3. ran npm test

Start by running the supplied react-test-renderer snapshot test with Carousel enabled and compare it with the mocked version. Inspect the Carousel and ParallaxImage rendering used by Tutorial1, focusing on the object data passed into snapshot formatting. Done means the Carousel can be included in the snapshot without the Invalid string length error.