테스트를 먼저하고 개발을 한다고...? TDD와 Jest

 

오랜만에 돌아온 아티클 미션!

TDD와 Jest에 대해 배우는 시간이였다.

 

TDD란?

테스트를 먼저 작성 후 그 테스트를 통과하도록 개발을 하는 개발 프로세스를 말한다.

일단 개념은 이해했지만, 실제로 코드를 짜기 전 테스트를 먼저 떠올리는 게 쉽지 않았다.

정말 TDD를 하는 회사가 있을까?

진짜 궁금해서 당장 사람인,잡코리아에 들어가 JD를 찾아보았다.

 

 

필수스펙은 아니지만 생각보다 테스트를 요구하는 회사들이 좀 있어보였다

정말 개발 쉽지않구나,,아직은 테스트를 먼저 설계하는 게 익숙하지 않아서 어렵게 느껴졌다.

어쩌겠는가 필요하다면 해야지. 모르면 배우면 된다!

 

https://youtu.be/W-fyyAHAqSU?si=DDKTGgBUBDXcwhto

진짜 TDD가 필요한건지 궁금해서 보았는데 한번씩 시청해보시길

 

 

 

TDD의 종류

피라미드 구조로 정리해보면 아래와 같다.

 

1. Unit Test : 단위테스트 (Jest)

함수나 컴포넌트 하나만 독립적으로 테스트 해보는것으로 가장 많이 쓰고 가장 공수가 덜드는 테스트라 볼수있다

 

2. Integration Test : 통합테스트

여러 컴포넌트가 함께 잘 동작하는지 테스트한다. Jest + React Testing Library로 가능하다

 

3. E2E Test (End to End):

전체 사용자 플로우를 테스트한다. 실제 사용자처럼 브라우저에서 클릭하고 입력하는 UI Test도 포함되어있는 테스트이다.

첨에 UI Test를 보고 내가 아는 그 UT(Usability Test : 사용성 테스트)인가 했는데 전혀 다른개념이다!

여기서의 UI Test는 테스트를 자동화시켜 기능이 제대로 작동하는지에 목적을 둔다

Usability Test가 기획/디자이너들 포폴에 쓴다면 개발자 포폴에 쓰는 테스트는 UI Test가 적절하다고 볼수있겠따,,

(이것도 모르고 나는 지난 사이드프로젝트때 Usability Test를 하자고 고집피웠다,, 결론적으론 못했지만)

물론 둘다 보여주면 아주좋겠지만 개발자 포폴이니까 ^^,,,!!

 

출처 : https://velog.io/@nueob/%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%94%BC%EB%9D%BC%EB%AF%B8%EB%93%9C%EB%9E%80

 

 

 

그래서 Jest가 뭔데..?

 

설명이 좀 늦었지만 Jest란 자바스크립트 환경에서 테스트를 할수있는 테스트 프레임워크이다

프레임워크이기 때문에 당연 node 설치가 필요하다능

 

 

출처 : https://velog.io/@bami/Javascript-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-Jest

(자스기준) 테스트 프레임워크도 종류가 몇있는거 같은데 현재로선 Jest가 가장 점유율이 높고

그외 Jasmine, mocha, (강사님 피셜) Vitest 등 다양한 프레임워크들이 나오는거같다

Jest는 기술적으로 특별해서라기보다는, 프론트엔드 생태계에서 사실상 표준처럼 사용되고 있어 자연스럽게 선택되는 도구라고 느꼈다

 

그리고 리액트 컴포넌트를 테스트하기위해 Testing Library 같은것도 존재한다,,

실제 사용자 관점에서 컴포넌트를 다루기 쉽게 도와주는 도구이기 때문에 npm 설치를 알아서 잘 하도록 하자

 

 

 

어쨋든 Jest도 프레임워크이기 때문에 그리고 당연히 문법이 따로 존재한다

다양한 기능, 그리고 다양한 메소드들이 있다 ^^...(wow)

expect(실제값).toBe(예상값);

 

Jest의 기본문법인데 저 예상값앞에 쓰는 메소드들을 Matcher라고 한다

Jest를 사용하려면 Matcher에 대한 이해가 꼭 필요하다!

 

대략 많이쓰는 것만 정리해보면

JavaScript Top3

1. toBe()
- === 비교

- 숫자, 문자열, boolean 같은 Primitive(원시,기본형)한 것만 비교

* toEqual와 혼돈 주의

2. toEqual()
- 객체, 배열 같은 참조 타입 비교
- 내용이 같은지 체크

3. toBeNull() / toBeUndefined() / toBeTruthy() / toBeFalsy()
null, undefined, 참/거짓 체크

React Top3

1. toBeInTheDocument()
DOM에 요소가 존재하는지 확인

2. toHaveTextContent()
요소의 텍스트 내용 확인

3. toHaveValue()
input, textarea의 값 확인

 

...정도가 있겠다. 당장은 못외우겠지만 일단 그렇다

내가 설명하기엔 너무 많아서 더 잘되어있는 아래 아티클을 참고해보자

https://think0wise.tistory.com/100

Jest - Matcher란?

 

 

 

오늘의 뇌용량은 이만 가득찼기때문에 오늘 실습문제를 푸는걸로 급마무리 하겠다.

오늘의 실습문제

문제 1. 입력 필드와 제출 (NameForm 컴포넌트)

• 요구사항
  • 사용자가 이름을 입력하고 제출하면, 화면에 “안녕하세요, [이름]님!” 이 표시된다.
  • 초기에는 아무 텍스트도 보이지 않는다.

//NameForm.jsx
import React from "react";
export default function NameForm() {
  const [name, setName] = React.useState("");
  const [greeting, setGreeting] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setGreeting(`안녕하세요, ${name}님!`);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="이름을 입력하세요"
        />
        <button type="submit">제출</button>
      </form>
      {greeting && <p>{greeting}</p>}
    </div>
  );
}

 

 

• 테스트 요구사항
  • 초기에는 인사말이 보이지 않는다
  • 이름을 입력하고 제출 시 인사말이 표시된다
  • hint) toBeNull, toBeInTheDocument

// NameForm.test.jsx
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import NameForm from "./NameForm";

test("초기에는 인사말이 보이지 않는다", () => {
  render(<NameForm />);

  expect(screen.queryByText(/안녕하세요,/)).toBeNull();
});

test("이름을 입력하고 제출 시 인사말이 표시된다", () => {
  render(<NameForm />);
  const input = screen.getByPlaceholderText("이름을 입력하세요");
  fireEvent.change(input, { target: { value: "철수" } });
  fireEvent.click(screen.getByText("제출"));

  expect(screen.getByText("안녕하세요, 철수님!")).toBeInTheDocument();
});

 

 

 

 

문제2. 조건부 렌더링 리스트 (TodoList 컴포넌트)

• 요구사항
  • 할 일 목록을 보여준다.
  • 초기 할 일 2개를 렌더링한다.
    • 초기 할 일 : ["React 공부하기", "테스트 배우기"]
  • “할 일 추가” 버튼을 누르면 새 할 일이 추가된다.
    • 새 할 일 : 새 할 일 ${prev.length + 1}

// TodoList.jsx
import React from "react";
export default function TodoList() {
  const [todos, setTodos] = React.useState(["React 공부하기", "테스트 배우기"]);

  const addTodo = () => {
    setTodos((prev) => [...prev, `새 할 일 ${prev.length + 1}`]);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>할 일 추가</button>
    </div>
  );
}

 

 

• 테스트 요구사항
  • 초기 할 일이 2개 표시된다
  • 할 일 추가 버튼을 누르면 새 항목이 추가된다
  • hint) toHaveTextContent, toBeInTheDocument

// TodoList.test.jsx
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import TodoList from "./TodoList";

test("초기 할 일이 2개 표시된다", () => {
  render(<TodoList />);

  expect(screen.getByText("React 공부하기")).toBeInTheDocument();
  expect(screen.getByText("테스트 배우기")).toBeInTheDocument();
});

test("할 일 추가 버튼을 누르면 새 항목이 추가된다", () => {
  render(<TodoList />);
  const button = screen.getByText("할 일 추가");

  fireEvent.click(button);

  expect(screen.getByText("새 할 일 3")).toBeInTheDocument();
});

 

 

 

참고자료

https://velog.io/@skyu_dev/Jest-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-JS%EC%9D%98-%EA%B8%B0%EB%8A%A5-%EC%A0%90%EA%B2%80%ED%95%98%EA%B8%B0#21-%EC%9C%A0%EC%9A%A9%ED%95%9C-matchers

[Jest] 테스트 코드로 JS 의 기능 및 로직 점검하기

https://velog.io/@nueob/%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%94%BC%EB%9D%BC%EB%AF%B8%EB%93%9C%EB%9E%80

테스트피라미드란 ?

 

https://velog.io/@bami/Javascript-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-Jest

[Javascript] 테스트 프레임워크 Jest