Vitest : testing-library/jest-dom에 대해서

GitHub - testing-library/jest-dom: :owl: Custom jest matchers to test the state of the DOM

GitHub - testing-library/jest-dom: :owl: Custom jest matchers to test the state of the DOM

 

jest-dom 라이브러리는 custom jest matchers를 제공하는 라이브러리로 더 명확한 테스트 코드를 작성하는데 도움이 된다. matchers에 대한 자세한 설명과 예제는 위의 사이트에 들어가면 확인할 수 있다. 

matchers	설명
toBeDisabled	element가 비활성화 되어있는지를 확인
toBeEnabled	element가 활성화 되어있는지를 확인
toBeEmptyDOMElement	element가 렌더링 된 내용 상에 없는지 확인
toBeInTheDocument	element가 존재하는지 확인
toBeInvalid	element가 유효하지 않음을 확인(input, select, textarea 등)
toBeRequired	element내에 required 요소가 있는지 확인
toBeValid	element가 유효하는지를 확인
toBeVisible	element가 사용자에게 표시되는지 확인
toContainElement	해당 element가 지정한 element를 포함하고 있는지 확인
toContainHTML	HTML요소를 포함하고 있는지 확인(HTML 태그를 완전하게 포함되어있어야 함)
toHaveAccessibleDescription	element가 accessible description을 가지고 있는지 확인 aria-describedy 속성을 활용, 접근성 도구를 통해 사용되는 설명이다.
toHaveAccessibleErrorMessage	element가 접근가능한 오류 메시지를 가지고 있는지 확인, 주로 폼 입력에서 유효성 검사 실패시에 표시되는 오류 메시지를 확인한다.
toHaveAccessibleName	element가 접근가능한 이름을 가지고 있는지 확인 접근성 도구를 통해 사용되는 텍스트이다.
toHaveAttribute	해당 element에 관련 속성과 관련 값이 있는지 확인
toHaveClass	해당 element class 속성 내에 관련된 값이 있는지 확인
toHaveFocus	element가 포커스 되어있는지를 확인
toHaveFormValues	Form 또는 FieldSet에 지정된 각 이름에 대한 element가 포함되어있고 지정된 값이 있는지 확인
toHaveStyle	element에 특정 CSS의 요소와 값이 적용되었는지 확인
toHaveTextContent	element내에 특정 텍스트 컨텐츠가 있는지 확인
toHaveValue	element내에 해당 value값이 존재하는지 확인
toBeChecked	해당 element가 checked 되었는지 확인
toBePartiallyChecked	해당 element가 부분적으로 checked 되었는지 확인
toHaveRole	해당 element가 role을 가지고 있는지 확인
toHaveErrorMessage	element가 오류 메시지를 갖고 있는지를 검사하는 데 사용

* toHaveStyle을 통해서 테스트할 때 유의할 점이 있다. 색상 테스트의 경우 색상명으로 작성하면 테스트가 제대로 진행되지 않는다. 색상 테스트는 RGB패턴이나 Hex코드를 사용하여 테스트를 해야 테스트가 제대로 진행된다. 가급적이면 style 자체에 대한 테스트보다 css의 class를 사용해 해당 class를 가지고 있는지( toHaveClass ) 여부로 테스트하는 것이 좋다. 

 

아래 예제는 jest-dom의 몇 가지 custom matchers를 사용하여 작성한 예제이다. 

//Comp1.jsx

export default function Comp1() {
    return (
        <div>
            <div>
                <h1>jest-dom 예제</h1>
            </div>
            <div>
                <label htmlFor="username">이름</label>
                <input type="text" name="username" id="username" required />
            </div>
            <div>
                <label htmlFor="profile">자기소개</label>
                <textarea name="profile" id="profile" cols="30" rows="30" value="안녕하세요." />
            </div>
            <div>
                <input type="checkbox" checked />
            </div>
            <button>Click</button>
        </div>
    )
}

// Comp1.test.jsx

import { test, expect, describe } from "vitest";
import { render, screen } from "@testing-library/react";
import Comp1 from "./Comp1";

describe("Comp1 테스트 예제", () => {
    test("button이 활성화 되어있다.", () => {
        render(<Comp1 />);
        const btnEl = screen.getByRole("button");
        expect(btnEl).toBeEnabled();
    });

    test("이름 label을 가지고 있는 input은 required요소를 가지고 있다.", () => {
        render(<Comp1 />);
        const inpEl = screen.getByLabelText(/이름/);
        expect(inpEl).toBeRequired();
    });

    test('h1 요소가 "jest-dom 예제"라는 텍스트를 가지고 있다. ', () => {
        render(<Comp1 />);
        const h1El = screen.getByRole("heading");
        expect(h1El).toHaveTextContent(/jest-dom 예제/);
    });

    test("HTML에 <button>Click</button> 태그를 포함하고 있다.", () => {
        const { container } = render(<Comp1 />);
        expect(container).toContainHTML('<button>Click</button>');
    });

    test("체크박스가 체크되어있다.", () => {
        render(<Comp1 />);
        const chkEl = screen.getByRole("checkbox");
        expect(chkEl).toBeChecked();
    });

    test("textarea는 '안녕하세요'라는 값을 가지고 있다", () => {
        render(<Comp1 />);
        const textareaEl = screen.getByLabelText(/자기소개/);
        expect(textareaEl).toHaveValue("안녕하세요.");
    });

})