[udemy] 1~4강 테스팅라이브러리 와 테스트러너, 단언

1강.

---

 

- React 테스팅 라이브러리는 철학에 기반한다 

 

1. 사용자가 실제로 사용하는 방식으로 테스트 

   (내부구현을 테스트 X)

2. 요소를 접근성 표시로 찾는 것 

  (스크린 리더 및 기타 보조 기술은 테스트 ID를사용하지 않고 요소를 찾음)

 

 

 

- React 테스팅 라이브러리와 Jest, Vitest의 역할 구분 

시뮬레이션 된 DOM제공 필요

 (브라우저 없이 테스트 하므로)

(클릭후 DOM의 생김새 파악)

 

 

- Jest, Vitest는 테스트 러너 

테스트를 찾고 실행하고, 통과 실패여부 결정하는 것 

본 강의는 Vitest를 기반으로 하고 있으나 

Jest와 Vitest는 차이가 없다. 

 

 

 

 

2강. 

---

 

Vite란? 

Javascript 기반의 프론트엔드 애플리케이션

Babel, webpack포함. 

Jsx구문 가능 import 문법 사용 가능 

브라우저 액세스, 핫리로드 제공 가능 

 

 

코드 살펴보기 

 

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

test("button click flow", () => {
  render(<App />);
  const buttonElement = screen.getByRole("button", {
    name: /blue/i,
  });
  expect(buttonElement).toHaveClass("red");
  fireEvent.click(buttonElement);
  expect(buttonElement).toHaveClass("blue");
  expect(buttonElement).toHaveTextContent(/red/i);
});

 

 

render 메서드 : 

시뮬레이션된 DOM을 만듦 (DOM으로 테스트 대상 이해)

여기서는 App컴포넌트를 render하라고 요청함 

 

  render(<App />);

 

 

screen : 

시뮬레이션 된 DOM이 testing-library/react에서 가져온 전역 객체 screen을 통해 엑세스

 

getByText  : 

시뮬레이션된 DOM을 살펴보고 제공된 텍스트와 일치하는 요소 찾기 

(여기서는 정규표현식 제공 : 좀더 유연함 )

(문자열도 가능 : 정확한 문자열이어야 함 )

 

 

expext : 

테스팅 라이브러리가 아님 

Vitest이며 Jest와 같은 구문

 

이것을 통해 테스트가 성공 혹은 실패여부

 

 

 

 

3강. Assertions

---

 

단언은 테스트의 통과여부를 결정하는 것.

 

  expect(linkElement).toBeInTheDocument();

 

expect:

 

모든 메서드는 expect로 시작함

전역 메서드

인수 : jest에서 조사하여 기대를 충족하는지 확인.

 

 

matcher:

단언유형

여기에는 인수가 없을 수 있다. (ex: toBeIntTheDocument)

요소를 알려진 수량과 비교할 때는 인수가 있을 것.

 

more assertion examples: 

 

1) 

expect(element.textContent).toBe('hello'); //1)

 

1. element : screen 메서드 중 하나를 사용하여 페이지에서 요소를 찾음

2. matcher : toBe: 

 

 

2) 

expect(elementsArray).toHaveLength(7);

matcher : toHaveLength 

 

 

Jest와 Vitest 

설정파일을 이용하여 테스트 전에 Jest-DOM을 가져옴 

toBeVisible() toBeChecked() toBeInTheDocument() 등의 Matcher가 존재

 

 

4강.  Jest와 Vitest의 작동방식

---

 

React 테스팅 라이브러리 : 

컴포넌트의 시뮬레이션 된 DOM을 만드는 일을 함 

이것은 interaction과 Assertion에 사용가능

 

테스트 러너 :

테스팅 라이브러리는 테스트 러너없이는 사용 불가

테스트를 찾고, 실행하고, 단언을 만듬

 

 

Jest와 Vitest의 작동방식:

둘다 전역 test메서드 존재,  두가지 인수 사용 (1 테스트 설명, 2 test함수)

테스트 통과여부를 결정하는 것은 Assertion임