testing-library/react-testing-library

findDOMNode appears to still be used, despite it being removed in React 19.

Closed this issue · 1 comments

MarcusWebDev commented
  • @testing-library/react version: 16.3.0
  • Testing Framework and version: jest 29.7.0
  • DOM Environment: jest-environment-jsdom 29.7.0

Relevant code or config:

import { render, fireEvent } from '@testing-library/react';

const { getByTestId } = render(<MyComponent />);
const button = getByTestId('button');

fireEvent.click(button);

What you did:

Updating React, Jest, and React testing library to the latest versions.

What happened:

Upon running a test with the code above, an error stating TypeError: _reactDom.default.findDOMNode is not a function appeared.

TypeError: _reactDom.default.findDOMNode is not a function

  187 |     const button = getByTestId('button');
  188 |
> 189 |     fireEvent.click(button);
      |               ^

  at Transition.performExit (../node_modules/react-transition-group/cjs/Transition.js:292:72)
  at Transition.updateStatus (../node_modules/react-transition-group/cjs/Transition.js:247:14)
  at Transition.componentDidUpdate (../node_modules/react-transition-group/cjs/Transition.js:209:10)
  at Object.react-stack-bottom-frame (../node_modules/react-dom/cjs/react-dom-client.development.js:11:589159)
  at runWithFiberInDEV (../node_modules/react-dom/cjs/react-dom-client.development.js:11:35320)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:316128)
  at recursivelyTraverseLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:336509)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:317049)
  at recursivelyTraverseLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:336509)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:317049)
  at recursivelyTraverseLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:336509)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:317049)
  at recursivelyTraverseLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:336509)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:313836)
  at recursivelyTraverseLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:336509)
  at commitLayoutEffectOnFiber (../node_modules/react-dom/cjs/react-dom-client.development.js:11:316437)
  at flushLayoutEffects (../node_modules/react-dom/cjs/react-dom-client.development.js:11:383047)
  at commitRoot (../node_modules/react-dom/cjs/react-dom-client.development.js:11:379082)
  at performWorkOnRoot (../node_modules/react-dom/cjs/react-dom-client.development.js:11:357882)
  at performSyncWorkOnRoot (../node_modules/react-dom/cjs/react-dom-client.development.js:11:402484)
  at flushSyncWorkAcrossRoots_impl (../node_modules/react-dom/cjs/react-dom-client.development.js:11:398428)
  at processRootScheduleInMicrotask (../node_modules/react-dom/cjs/react-dom-client.development.js:11:399275)
  at ../node_modules/react-dom/cjs/react-dom-client.development.js:11:402774
  at flushActQueue (../node_modules/react/cjs/react.development.js:338:32)
  at exports.act (../node_modules/react/cjs/react.development.js:549:33)
  at ../node_modules/@testing-library/react/dist/act-compat.js:70:25
  at Object.eventWrapper (../node_modules/@testing-library/react/dist/pure.js:130:28)
  at fireEvent (../node_modules/@testing-library/dom/dist/events.js:12:35)
  at Function.fireEvent.<computed> [as click] (../node_modules/@testing-library/dom/dist/events.js:110:36)
  at Function.fireEvent.<computed> [as click] (../node_modules/@testing-library/react/dist/fire-event.js:15:52)
  at click (src/common/components/focusedticker/FocusedTicker.spec.js:189:15)
  at s (../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:77:16)
  at Generator.<anonymous> (../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:60:19)
  at Generator.next (../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:102:21)
  at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
  at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
  at ../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
  at Object.<anonymous> (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)

Image

Reproduction:

Problem description:

React Testing Library seems to state they've added support for React 19. However, in React 19 findDOMNode was removed, and it still seems to be called in the fireEvent.click() function, and possibly in other locations as well.

Suggested solution:

React 19's upgrade guide suggests replacing findDOMNode with DOM refs.

eps1lon commented

The stacktrace shows that it's used within react-transition-group. The fireEvent.click pointer is just the entrypoint that caused this error.