React Native Testing Library + Expo Router Testing Library: Unable to find node on an unmounted component after press event simulation

[winghouchan]

Describe the bug

When using React Native Testing Library with Expo Router Testing Library, simulating a user press event on a Link triggers the following error:

Unable to find node on an unmounted component.

  at findCurrentFiberUsingSlowPath (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:574:13)
  at ReactTestInstance._currentFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18325:17)
  at ReactTestInstance.get (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18397:19)
  at props (node_modules/@testing-library/react-native/src/user-event/utils/dispatch-event.ts:25:26)
  at getEventHandler (node_modules/@testing-library/react-native/src/user-event/utils/dispatch-event.ts:12:19)
  at emitTextPressEvents (node_modules/@testing-library/react-native/src/user-event/press/press.ts:125:16)
  at basePress (node_modules/@testing-library/react-native/src/user-event/press/press.ts:45:5)
  at Object.press (node_modules/@testing-library/react-native/src/user-event/press/press.ts:17:3)
  at wrapAsync (node_modules/@testing-library/react-native/src/helpers/wrap-async.ts:19:22)

More details, including a hypothesis and investigation notes, can be found in the original issue opened in Expo's GitHub: expo/expo/issues/32313. I'm unsure where the responsibility of the issue lies (here versus Expo), hence opening an issue here as well.

Expected behavior

The above error does not occur. The press event simulations are successful.

Steps to Reproduce

A minimal reproducible example is available here. After cloning and installing dependencies:

1. Run npm test.

Versions

@testing-library/react-native: ^12.7.2 => 12.7.2 
react: 18.2.0 => 18.2.0 
react-native: 0.74.5 => 0.74.5 
react-test-renderer: 18.2.0 => 18.2.0 

[mdjastrzebski]

Let's continue this in your original issue in Expo Router: expo/expo#32313 (comment)

[winghouchan]

Moving the convo here because there's probably not anything for Expo's team to do. Summary of the conversation so far:

• The current hypothesis on the root cause is React Native Testing Library attempting to dispatch a pressOut event to the Link after it has become unmounted due to the navigation triggered on the press event. Follow the stack trace and see this point in the source.
• The above behaviour has two points of significance:
  • The order in which React Native Testing Library simulates the press events may not be correct. React Native documentation states the order is: pressIn → longPress (if pressed for more than the delay) → pressOut → press (if not a long press) (source). React Native Testing Library simulates the events in the following order: pressIn → press | longPress → pressOut (source). Fixing this would resolve this particular issue as the Link component would no longer be unmounted due to the behaviour of unmounting being triggered on the last event.
  • The above point, however, doesn't handle the general possibility of a component potentially becoming unmounted between events, the second point of significance.

[mdjastrzebski]

Fix for this issue has been released in v12.8.1 🎉