Import ProgressiveListView keeps open handles during tests

[fortmarek]

How to reproduce

yarn test -> You will get the following warning at the end of the test:

A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.

yarn test --detectOpenHandles -> you will get the following error:

Jest has detected the following 2 open handles potentially keeping Jest from exiting:
● MESSAGEPORT
2 | import { ScrollView, Text } from "react-native";
3 | import "@quilted/react-testing/matchers";
> 4 | import { ProgressiveListView } from "recyclerlistview";
| ^
5 |
6 | import Warnings from "../errors/Warnings";
7 | import AutoLayoutView from "../AutoLayoutView";
at node_modules/scheduler/cjs/scheduler.development.js:178:17
at Object. (node_modules/scheduler/cjs/scheduler.development.js:645:5)
at Object. (node_modules/scheduler/index.js:6:20)
at require (node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23:17)
at Object. (node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17:3)
at Object.require (node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:21:17)
at Object.require (node_modules/react-native/Libraries/Animated/AnimatedEvent.js:16:21)
at Object.require (node_modules/react-native/Libraries/Animated/AnimatedImplementation.js:13:44)
at Object. (node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js:11:1)
at requireActual (node_modules/react-native/jest/mockComponent.js:13:30)
at mockComponent (node_modules/react-native/jest/setup.js:145:27)
at Object.require [as ScrollView] (node_modules/react-native/index.js:191:12)
at node_modules/recyclerlistview/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx:21:41
at Object. (node_modules/recyclerlistview/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx:17:1)
at Object. (node_modules/recyclerlistview/src/core/RecyclerListView.tsx:41:1)
at Object. (node_modules/recyclerlistview/src/index.ts:5:1)
at Object. (src/tests/FlashList.test.tsx:4:1)
...

I have seen a similar issue here - it's likely this is a false positive coming from jest.

[jwoodmansey]

I solved this by adding jest.useFakeTimers() above all of my tests using FlashList and cleaning them up with jest.runAllTimers().

Also make sure any redux dispatches are correctly wrapped in act, user events are awaited, and macro tasks (for example setTimeouts) are cleared on unmount (clearTimeout).

Example:

import React from 'react';
import {render} from '@testing-library/react-native';

jest.useFakeTimers();
const component = <ComponentWithFlashList />;

describe('Screen', () => {
  afterAll(() => {
    // To run Reanimated timers
    jest.runAllTimers();
  });

  it('Renders', () => {
    render(component);
  });
});

My setup file also looks like this:

require('react-native-reanimated').setUpTests();

require('@shopify/flash-list/jestSetup');