화면 테스트하기

@testing-library/react를 통해 테스트를 할 수 있다.

 

render와 expect를 이용한다.

npm test

 

명령어를 통해 만들어둔 "컴포넌트".spec.tsc를 검사할 수 있다.

예시

Button.spec.tsx

import { render, screen } from "@testing-library/react";
import Button from "./Button";
import { BookStoreProvider } from "../../context/themeContext";

describe("button 컴포넌트 테스트", () => {
  it("렌더 확인", () => {
    // 1. 렌더하기
    render(
      <BookStoreProvider>
        <Button size="large" scheme="primary">
          버튼
        </Button>
      </BookStoreProvider>
    );
    // 2. 확인
    expect(screen.getByText("버튼")).toBeInTheDocument();
  });

  it("font-size props", () => {
    const { container } = render(
      <BookStoreProvider>
        <Button size="large" scheme="primary">
          버튼
        </Button>
      </BookStoreProvider>
    );
    expect(screen.getByRole("button")).toHaveStyle({
      fontSize: "2rem",
    });
  });
});

 

=> 아래는 버튼이 2rem인지 확인하는 테스트이다. 

=> 2rem이라면 결과가 성공, 아니라면 실패가 뜬다. 

=> large로 prop을 넘겼고 theme을 보면 large인 경우 fontSize가 2rem이므로 성공이 떴다. 

 

input.spec.tsx

import { render, screen } from "@testing-library/react";
import InputText from "./InputText";
import { BookStoreProvider } from "../../context/themeContext";
import React from "react";

describe("InputText 컴포넌트 테스트", () => {
  it("렌더 확인", () => {
    // 1. 렌더하기
    render(
      <BookStoreProvider>
        <InputText placeholder="여기에 입력" />
      </BookStoreProvider>
    );
    // 2. 확인
    expect(screen.getByPlaceholderText("여기에 입력")).toBeInTheDocument();
  });

  it("forwardRef 테스트", () => {
    const ref = React.createRef<HTMLInputElement>();
    render(
      <BookStoreProvider>
        <InputText placeholder="여기에 입력" ref={ref} />
      </BookStoreProvider>
    );
    expect(ref.current).toBeInstanceOf(HTMLInputElement);
  });
});