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

[Paduado]

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 jestjs/jest#8109

[Ziew]

Any update on that?
Workaround for me was mocking Animated.ScrollView but it's not perfect solution.

[raimonkh]

What I did was increase the size of memory for node export NODE_OPTIONS := --max_old_space_size=8192

[pke]

Just encountered this too in the form of jestjs/jest#8109

Sad, that there does not seem to be a workaround for that. Increasing the memory of the node process is not really a valid solution. The ref problem has its roots somewhere else.

edit: Seems my problem goes away when I am using Pressable instead of TouchableOpacity to put my ref on.

[scrungrth]

adding this worked for my test:

import { Animated, View } from 'react-native';

...

it('should work', () => {
    Object.defineProperty(Animated, 'View', {
      get value() {
        return View;
      },
    });
    ...
});

[sparachi]

On the lines of @pke comments, re-adjusting the ref worked for me too. jestjs/jest#10577 (comment)

[blimmer]

Depending on the Node version you're using, the OOM might be compounded by this issue: jestjs/jest#11956

[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

[redreceipt]

Any update on that?
Workaround for me was mocking Animated.ScrollView but it's not perfect solution.

How did you mock Animated.ScrollView? This is the solution I'd like to go with

[AugustinLF]

Something like that should work

jest.mock('react-native', () => {
  const rn = jest.requireActual('react-native'
  return {
    ...rn,
    Animated: {
      ...rn.Animated,
      View: rn.View,
    }
  }
}