react-native-gesture-handler: Unable to find node on an unmounted component error

=== Open the issue

Description

Screenshots

Steps To Reproduce

Install the libraries listed below
Follow the jest expo guideline
Create two files below
Run jest

Expected behavior

To render TouchableOpacity. TouchableOpacity from react-native renders just fine.

Actual behavior

Throws error provided in Screenshots section.

Minimal code example

Test file:

import React from 'react';
import { cleanup, render } from '@testing-library/react-native';
import { Gesture } from '../Gesture';

describe('HeaderRightButton filter', () => {
  afterEach(() => {
    jest.clearAllMocks();
    cleanup();
  });

  it('should render', () => {
    const { getByTestId } = render(<Gesture/>);
  });
});

Component file:

import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

export const Gesture: FC = () => {
  return (
    <View>
      <TouchableOpacity
        onPress={() => console.log('@1')}
      >
        <Text>asdf</Text>
      </TouchableOpacity>
    </View>
  );
};

Package versions

React: 16.13.1
React Native: “react-native”: “https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz”,
React Native Gesture Handler: 1.8.0
Ubuntu 20
expo 40.0.0
jest-expo: 40.0.1
@testing-library/react-native: “7.1.0”
react-test-renderer: 17.0.1 === Open the issue

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 15 (3 by maintainers)

Commits related to this issue

Apply test workaround altough it is not perfect Removed navigation component testing cause by the issue - https://github.com/software-mansion/react-native-gesture-handler/issues/1305. — committed to dooboolab-community/hackatalk by hyochan 3 years ago
Apply test workaround altough it is not perfect Removed navigation component testing cause by the issue - https://github.com/software-mansion/react-native-gesture-handler/issues/1305. — committed to dooboolab-community/hackatalk by hyochan 3 years ago
Apply test workaround altough it is not perfect Removed navigation component testing cause by the issue - https://github.com/software-mansion/react-native-gesture-handler/issues/1305. — committed to dooboolab-community/hackatalk by hyochan 3 years ago

Most upvoted comments

I was facing the same issue, so I’ve updated react-test-renderer to version 17.0.2 and worked.

+12

iaurg on May 3, 2021

Any update on it @jakub-gonet , @iaurg ? I’m experiencing the exact same problem. Upgrading react-test-renderer to version 17.0.2 didn’t worked. 😕

My package version:

React: 17.0.2
React Native: "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
React Native Gesture Handler: 1.10.3
Ubuntu 20
expo 41.0.1
jest-expo: 42.0.0
@testing-library/react-native: "7.2.0"
react-test-renderer: 17.0.2

GautierArcin on Jul 20, 2021

Any update on this? Are there specific rngh mocks that are missing that need to be added?

anlai2 on Apr 28, 2021

I solved this issue by solving the warning using act

import { act } from 'react-test-renderer';

describe('When rendering xxx', () => {
  describe('With a random state', () => {
    beforeAll(() => {
      act(() => {
        store.dispatch(xxx.update(xxxMock));
        store.dispatch(yyy.update(yyyMock));
      });
    });
    it('should render it correctly', () => {
      expectToMatchSnapshot({ component: <xxx />, store });
    });
  });
});

hansdesmedt on Feb 25, 2021

We have the exact same behavior.

tdekoning on Jan 27, 2021

Yes Im having this same error, in my case im using Gesture.LongPress() and is throwing me TypeError: Cannot read properties of undefined (reading 'LongPress') 😢

ManuViola77 on Jun 13, 2022

Are you using the mocks, as documented here: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/testing ?

This did not solve the problem for me.

eprice122 on Apr 3, 2022

@iaurg That worked for us, thanks!!

anlai2 on May 3, 2021

This problem is caused by missing rngh mocks. You can mock rngh components by yourself as a workaround.

jakub-gonet on Feb 26, 2021