React 기초~단위 테스트/사용자 이벤트

• 저는 사용자 이벤트를 테스트할 때 React-testing-library의 fireEvent 함수를 사용합니다.

・src/Example.js

import Counter from "./components/Counter";

const Example = () => {
  const originCount = 0;

  return <Counter originCount={originCount}></Counter>;
};

export default Example;

・src/commponets/Counter.jsx

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;

・src/commponets/Counter.test.jsx

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();
});

・성공

・실패

위 내용은 React 기초~단위 테스트/사용자 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!