React 기초~단위 테스트/설명 테스트

• 현재 코드를 테스트할 때 설명 기능을 사용하여 코드를 그룹으로 나눌 수 있습니다.

• 이번에는 카운터 앱을 만들었습니다.

・src/Example.jsx

import Counter from "./components/Counter";

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

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

export default Example;

・src/comComponents/Counter.jsx

import { useState } from "react";

const Counter = (props) => {
  const { originCount } = props;
  const [count, setCount] = useState(originCount);

  const countUp = () => {
    setCount(count + 1);
  };

  const countDown = () => {
    setCount(count - 1);
  };

  const countClear = () => {
    setCount(0);
  };

  return (
    <div>
      <h2>Counter test</h2>
      <div>
        <span>Current count:{count}</span>
      </div>
      <div>
        <button onClick={countUp}>Countup</button>
        <button onClick={countDown}>Countdown</button>
        <button onClick={countClear}>Clear</button>
      </div>
    </div>
  );
};

export default Counter;

・src/comComponents/Counter.test.jsx

import { fireEvent, render, screen } from "@testing-library/react";
import Counter from "./Counter";

//A group for initial test
describe("Counter", () => {
 describe("Check the initial display", () => {

　　// ①　A Confirming the Initial State
    test("Whether 
    test("Whether the current count is 0 or not", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();
    });
  });

  //A group for actions tests
  describe("Control buttons", () => {

    // ①　count up
    test("Whether the current count changes into 1 or not, in case the 
      countup button is clicked", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Countup" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:1");
      expect(spanEl).toBeInTheDocument();
    });
　　
　　// ②　count down 
    test("Whether the current count  changes into -1 or not, in case the 
      countdown button is clicked ", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Countdown" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:-1");
      expect(spanEl).toBeInTheDocument();
    });

　　// ③　count clear 
    test("Whether the current count changes into 0 or not, in case the 
      clear button is clicked ", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Clear" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:0");
      expect(spanEl).toBeInTheDocument();
    });
  });
});

・카운트업

・카운트다운
・카운트다운
・성공
・실패

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