2022/11/08 - Jest 사용법

지금 다룰 내용은 전반적인 Jest가 아니라 DOM에서의 Jest에 대한 간단한 element확인 방법에 대해 다룰 것이다. Jest에 대한 예시를 공부하기 전에 몇 가지 제스트의 메소드에 대해 메모하려고 한다.

1. describe

여러개의 테스트 코드를 묶을 때 사용한다.

describe("A11yHidden 컴포넌트", () => {
  test("A11yHidden 컴포넌트는 정상적으로 렌더링됩니다.", () => {
    render(<AllyHidden>테스트</AllyHidden>);
    const element = screen.getByText(/테스트/);
    expect(element).toBeInTheDocument();
  });
  test("span", () => {
    render(<A11yHidden data-testid="tester" />);
    const element = screen.getByTestId("tester");
    expect(element.localName).toBe("span");
  });
});

다음과 같이 코드를 묶을 때 사용한다.

2. test

jest에서의 한개의 테스트 단위를 이야기한다. only를 이용하여 여러 테스트중 한개의 테스트만 실행도 가능하다

describe("A11yHidden 컴포넌트", () => {
  test("A11yHidden 컴포넌트는 정상적으로 렌더링됩니다.", () => {
    render(<A11yHidden>테스트</A11yHidden>);
    const element = screen.getByText(/테스트/);
    expect(element).toBeInTheDocument();
  });
  test.only("span", () => {
    render(<A11yHidden data-testid="tester" />);
    const element = screen.getByTestId("tester");
    expect(element.localName).toBe("span");
  });
});

3. 기타(자세한 테스트 사용법

3-1 getByText - toBeIntheDocument

3-1-1

getByText를 이용하여 document 안에 있는 textContent를 가진 element를 선택한다

3-1-2

toBeIntheDocument를 이용하여 element가 document에 있는지 검색한다.

test("AllyHidden 컴포넌트는 정상적으로 렌더링됩니다.", () => {
    render(<AllyHidden>테스트</AllyHidden>);
    const element = screen.getByText(/테스트/);
    expect(element).toBeInTheDocument();
  });

3-2 getByTestId

3-2-1 data-testid 프로퍼티에 element에 고유한 값을 만들어 준다

3-2-2 getByTestId 를 이용하여 data-testid에 있는 고유한 값을 탐색한다

3-2-3

3-2-2에서 선택한 element에서 localName를 toBe 메서드로 검사한다.

test("span", () => {
    render(<AllyHidden data-testid="tester" />);
    const element = screen.getByTestId("tester");
    expect(element.localName).toBe("span");
  });

nodeName을 이용하여 검사하는 방법도 있다.

test("span", () => {
    render(<AllyHidden data-testid="tester" />);
    const element = screen.getByTestId("tester");
    expect(element.nodeName.toLowerCase()).toBe("span");
  });

toHaveClass를 이용하여 class를 체크한는 방법도 있다.

test("컴포넌트에 `className` 속성(prop) 값이 추가된 경우, 해당 클래스 이름을 포함합니다.", () => {
    let expected = "userDefinedClassName";
    render(<Banner className={expected} />);

    const element = screen.getByRole("figure");
    expect(element).toHaveClass("Banner", expected);
  });

3-3 getByRole - toHaveStyle

button, figure와 같은 룰을 가진 element를 선택한다. 선택한 element에 toHaveStyle을 이용하여 해당 스타일일 프로퍼티와 값이 있는지 검사한다.

test("컴포넌트의 `width`, `height` 속성(prop) 값이 설정된 경우, 인라인 스타일로 반영됩니다.", () => {
    const expected = {
      width: "280px",
      height: "590px",
    };

    render(<Banner width={expected.width} height={expected.height} />);

    const element = screen.getByRole("figure");
    expect(element).toHaveStyle(expected);
  });

3-4 toBeA11yHidden

element를 screen의 메서드를 이용하여 선택하고 toBeA11yHidden을 사용하여 접근성 감춤 요건을 가지고 있는 element를 검사할 수 있다.