React Basics~unit test/user event

import Counter from "./components/Counter"; const Example = () => { const originCount = 0; return <Counter originCount={originCount}></Counter>; }; export default Example; 

import { useState } from "react"; const Counter = (props) => { const { originCount } = props; const [count, setCount] = useState(originCount); const countUp = () => { setCount(count + 1); }; return ( <div> <h2>A test of counter</h2> <div> <span>Current count:{count}</span> </div> <div> <button onClick={countUp}>Countup</button> </div> </div> ); }; export default Counter; 

import { render, screen, fireEvent } from "@testing-library/react"; import Counter from "./Counter"; test("Whether the current count counts up or not, in case the countUp button is clicked ", () => { const { debug } = render(<Counter originCount={0} />); //test the initial state. const spanElBeforUpdate = screen.getByText("Current count:0"); expect(spanElBeforUpdate).toBeInTheDocument(); //test the user event. In this case, a click event. const btn = screen.getByRole("button", { name: "Countup" }); fireEvent.click(btn); //test the state which is after clicked button. const spanEl = screen.getByText("Current count:1"); expect(spanEl).toBeInTheDocument(); });