Show that re-querying DOM nodes is necessary in React Testing Library based tests.

rtl-stale-mistake.test.js

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

function clickIncrement() {
  fireEvent.click(
    screen.getByRole('button', {
      name: 'Increment',
    }),
  );
}

function clickToggle() {
  fireEvent.click(
    screen.getByRole('button', {
      name: 'Toggle',
    }),
  );
}

function Comp() {
  const [count, setCount] = useState(1);
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <h2>{count}</h2>}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setShow(!show)}>Toggle</button>
    </div>
  );
}

test('reusing stale DOM nodes can give unexpected results', () => {
  render(<Comp />);

  const headingElemInitial = screen.getByRole('heading');
  expect(headingElemInitial).toHaveTextContent('1');

  clickToggle();
  clickIncrement();
  clickToggle();

  const headingElemFinal = screen.getByRole('heading');
  expect(headingElemFinal).toHaveTextContent('2');
  expect(headingElemInitial).toHaveTextContent('1');
});