React 기초~단위 테스트/UI

• 현재 코드인 단위 테스트를 테스트할 때 몇 가지 도구를 사용합니다. 그들은 농담과 반응 테스트 라이브러리입니다.

・src/Example.js

import Greet from "./components/Greet";

const Example = () => {
  return <Greet />;
};

export default Example;

・src/comComponent/Greet.jsx

const Greet = () => {
  return (
    <div>
      <form>
        <h1>Hello</h1>
        <input type="radio" />
        <label htmlFor="fullname">Fullname</label>
        <input id="fullname" type="text" placeholder="Fullname" />
        <button>button1</button>
        <button>button2</button>
        <img src="/logo512.png" alt="React Logo" />
        <h2>Hello2</h2>
      </form>
    </div>
  );
};

export default Greet;

・src/comComponent/Greet.test.jsx

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

test("Whether elements exists or not", () => {
  const { debug, container } = render(<Greet />);
  //get the h1 element
  const h1El = screen.getByText("Hello");
  expect(h1El).toBeInTheDocument();

  //get the h2 element by specifying the name
  const headEl = screen.getByRole("heading", { name: "Hello2" });
  debug(headEl);
  expect(headEl).toBeInTheDocument();

  //get radio button
  const radioEl = screen.getByRole("radio");
  debug(radioEl);
  expect(radioEl).toBeInTheDocument();

  //get the img element
  const imgEl = screen.getByRole("img");
  debug(imgEl);
  expect(imgEl).toBeInTheDocument();

  //get the h1 element by getting the alt
  const imgEl2 = screen.getByAltText("React Logo");
  debug(imgEl2);
  expect(imgEl2).toBeInTheDocument();

  //get the h2 element by using the querySelector of container
  const h2El = container.querySelector("h2");
  debug(h2El);
  expect(h2El).toBeInTheDocument();

  //get an element by getting the labe
  const elByLabel = screen.getByLabelText("Fullname");
  debug(elByLabel);
  expect(elByLabel).toBeInTheDocument();

  //get an element by getting the placeholder
  const elByPlaceholder = screen.getByPlaceholderText("Fullname");
  debug(elByPlaceholder);
  expect(elByPlaceholder).toBeInTheDocument();
});

• 테스트 함수는 테스트 함수입니다.

• 첫 번째 인수는 테스트 제목입니다. 두 번째 인수는 테스트 코드를 실행하는 콜백 함수입니다.

-콜백 함수에서는 렌더링 함수를 사용해 테스트할 컴포넌트를 렌더링해야 합니다. 그리고 필요하다면 디버그와 컨테이너를 사용할 수도 있습니다.

const { debug, container } = render(<Greet />);

• 그런 다음 화면을 사용하여 요소를 가져와야 합니다.*.
  getByText(), getByRole(), getByAltText() 등과 같은 많은 함수가 있습니다.

• 마지막으로 Expect(이전에 얻은 요소).toBeInTheDocument();를 사용하여 해당 요소가 문서에 존재하는지 확인해야 합니다.

• 테스트 코드를 작성한 후 npm test 명령을 실행해야 합니다.

・성공(테스트 통과)

・실패(테스트 실패)

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