Skip to content

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

Closed as not planned
@MarcusWebDev

Description

@MarcusWebDev
  • @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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions