{...}
import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { fireEvent } from "@testing-library/dom";
function App() {
  const [state, setState] = useState(0);
  console.log(1);
  useEffect(() => {
    console.log(2);
  }, [state]);
  Promise.resolve().then(() => {
    console.log(3);
  });
  setTimeout(() => {
    console.log(4);
  }, 0);
  const onClick = () => {
    console.log(5);
    setState((num) => num + 1);
    console.log(6);
  };
  return (
    <div>
      <button onClick={onClick} data-testid="action">
        click me
      </button>
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  const action = document.querySelector('[data-testid="action"]');
  fireEvent.click(action);
Click the button after 100ms
}, 100);

{...}
import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { fireEvent } from "@testing-library/dom";
function App() {
  const [state, setState] = useState(0);
  console.log(1);
  useEffect(() => {
    console.log(2);
  }, [state]);
  Promise.resolve().then(() => {
    console.log(3);
  });
  setTimeout(() => {
    console.log(4);
  }, 0);
  const onClick = () => {
    console.log(5);
    setState((num) => num + 1);
    console.log(6);
  };
  return (
    <div>
      <button onClick={onClick} data-testid="action">
        click me
      </button>
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  const action = document.querySelector('[data-testid="action"]');
  fireEvent.click(action);
Click the button after 100ms
}, 100);