Out of memory error using debug() in an Animated.FlatList with a ref

Describe the bug

I’m implementing a test in a component that renders an Animated.FlatList, when I use debug the test hangs and eventually throws a JavaScript heap out of memory error.

I found out that If I remove the ref I’m passing to the Animated.FlatList everything works fine. It also works with a regular FlatList.

Expected behavior

Test shouldn’t hang and debug() output should be visible in the console.

Steps to Reproduce

Run this test:

function MyFlatList() {
  const ref = useRef();
  return (
    <Animated.FlatList
      ref={ref}
      data={[1, 2, 3]}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
}

test('FlatList', () => {
  const { debug } = render(<MyFlatList />);
  debug();
  expect(true).toBe(true);
});

The test will hang and throw this error: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Versions

@testing-library/react-native: 7.0.2 => 7.0.2 
react: 16.13.1 => 16.13.1 
react-native: 0.63.2 => 0.63.2 
react-test-renderer: ^16.13.1 => 16.13.1 

[louiszawadzki]

Hi, we’ve faced a similar issue. It looks as if when using a ref on an Animated component, the snapshot becomes huge.

As an example, you can run:

import React, { useRef } from 'react';
import { Animated } from 'react-native';
import { render } from 'react-native-testing-library';

const Component = () => {
  const ref = useRef(null);
  return <Animated.View ref={ref} />;
};

describe('component', () => {
  it('renders', () => {
    const page = render(<Component />);
    expect(page).toMatchSnapshot();
  });
});

And see that the snaphsot is nearly 3,000 lines long. If you use an Animated.ScrollView instead of Animated.View, the snapshot is more than 30,000 lines long!

Also this might be linked to https://github.com/facebook/jest/issues/8109

[mdjastrzebski]

Seems like the root issue is related to the actual size of component tree generated by using Animated wrappers. If so then the you can work around the issue by:

1. including memory allocated to jest instance using approach described by @raimonkh
2. mocking Animated implementation as described by @scrungrth, preferably using jest features instead of Object.defineProperty