TDD (소프트웨어 개발 방법론)

# 테스트 통과 여부를 확인하며 개발하는 소프트웨어 개발 방법론을 TDD(Test-Driven-Development: 테스트 주도 개발)라고 합니다.

 

#소프트웨어 검증방법 => 테스트 코드

---

TDD-(Test-driven Development)-코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론.-개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법.-TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미.

 

-1의 과정을 마치기 전에 2의 작업을 시작하지 않도록 주의해야 합니다.

- 2를 진행할 때에는, 1의 테스트를 통과할 정도의 최소 코드만 작성해야 합니다.

- 결과적으로 버그가 더 적은 코드를 짤 수 있게 됩니다. 또, 불필요한 설계를 피할 수 있고, 테스트 코드의 요구 사항에 집중할 수 있게 됩니다. 일반적으로 TDD를 따라 소프트웨어를 개발할 경우 그렇지 않은 경우보다 결함을 50 ~ 90% 까지 감소시킬 수 있습니다.

 

# 테스트 코드를 작성하는 방법 

- describe, it, assert, expect : JavaScript 내장 기능이 아니라 테스트 프레임워크에서 제공하는 테스트 작성을 위한 도구.

- mocha라는 테스트 프레임워크와 chai라는 라이브러리.

---

< React 환경에서 테스트하기 >

-React에서 테스트는 Testing Library, Jest를 이용해서 할 수 있습니다. (Testing Library, Jest 둘다 React에서만 쓸 수 있는 라이브러리는 아닙니다. Vue, Svelte 등 다른 프레임워크에서도 이용할 수 있습니다.)

-Testing Libarary에서 React용 React Testing Library을 제공하고 있기 때문에, create-react-app을 이용하여 React 프로젝트를 생성하면 자동으로 Testing Libarary를 이용할 수 있습니다. 이렇게 설치한 Testing Library는 테스트를 실행하고 싶은 컴포넌트나 클릭 이벤트등 다양한 곳에 쓸 수 있습니다.

- Jest는 JavaScript의 Testing Framework / Test Runner로써, 테스트 파일을 자동으로 찾아 테스트를 실행하고, 테스트를 실행한 결과 기대만큼 올바른 값을 가지고 있는지 함수를 이용하여 체크하여 테스트가 성공인지 실패인지를 판단해 줍니다.

-Testing Libarary와 Jest는 역할이 각각 다르기 때문에 React에 대한 테스트를 진행할 때는 어느 한쪽 라이브러리를 이용하는 것만으로는 테스트를 할 수 없습니다.

 

 

< React 기본 테스트 환경 확인하기 >

1. 일단 npx create-react-app 실행하여 새로운 프로젝트를 생성한다.

-생성된 폴더에서 package.json 파일을 확인하면 dependencies 안에 @testing이라는 접두어가 붙은 3개의 라이브러리를 확인할 수 있습니다. 이것들이 바로 테스트를 수행할 때 이용하는 라이브러리입니다.

//package.json

{
  "name": "0329todo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.9",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

- @testing-library/jest-dom : jest-dom에서 제공하는 custom matcher를 사용할 수 있게 해줍니다.

- @testing-library/react : 컴포넌트의 요소를 찾기 위한 query가 포함되어 있습니다.

- @testing-library/user-event : click 등 사용자 이벤트에 이용됩니다.

 

//App.test.js

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

-다시 src 폴더 안을 확인해 보면, setupTests.js 와 App.test.js 라는 이름의 파일을 확인할 수 있습니다.

-App.test.js 파일에는 위의 코드처럼 간단한 테스트가 이미 만들어져 있습니다.

 

# test함수

- test 함수는 Jest 함수로 테스트를 실행할 때 반드시 이용하는 함수입니다.

-test 함수의 첫 번째 인자는 테스트가 어떤 내용인지 나중에 다시 읽어도 테스트 내용을 알 수 있는 설명을 작성합니다.

두 번째 인자는 하고자 하는 테스트를 함수의 형태로 넣습니다.

 

#두번째 인자로 들어간 함수를 살펴보자.

-첫번째 줄을 보면, 테스트하고자 하는 컴포넌트를 render()함수로 전달하고 있습니다. react-testing-library에서는 테스트를 진행할 컴포넌트를 render()함수의 인자로 전달합니다.
-두번째 줄에 있는 screen의 다양한 메소드 중 getByText() 메서드를 이용하여 render()에서 가져온 App 컴포넌트 중 "learn react"라는 문자열이 있는지 확인하여 linkElement에 할당하고 있습니다. (“i”는 Regular Expression으로 "i"를 붙임으로써 대소문자를 구분하지 않게 만들어 줍니다.)
-세번째 줄에서는 expect 함수의 인자로 지정한 요소가 document.body에 존재하는지 toBeInTheDocument 함수를 사용하여 체크하고 있습니다. 여기서 toBeInTheDocument 함수는 matchers 함수라고 부릅니다.

 

# test 함수, expect 함수는 Jest의 함수고, toBeInTheDocument는 jest-dom 라이브러리에 포함된 Custom matchers입니다.

 

//setupTests.js

import '@testing-library/jest-dom';

- jest-dom은 src 폴더의 setupTests.js 파일 내에서 import 되고 있습니다.

- setupTests.js 파일에서 import를 삭제하면 toBeInTheDocument 함수를 이용할 수 없습니다.

 

< 테스트 직접 만들기 >

-파일명을 <파일명>.test.js와 같이 해주시면 됩니다. <파일명>.spec.js에서도 가능합니다.

파일명을 이렇게 짓고 테스트를 작성하면, Jest가 테스트 파일로 판단하여 작동합니다.

-테스트는 test 함수 안에 쓰고 test 함수의 첫 번째 인자에는 테스트에 대한 설명을, 두 번째 인자에는 테스트의 내용을 함수의 형태로 작성합니다.

test('2 더하기 2는 4', () => {
  expect(2 + 2).toBe(4);
 });

it('2 더하기 2는 4', () => {
  expect(2 + 2).toBe(4);
 });

- test 함수 대신 it 함수를 사용해도 같은 결과가 나옵니다.

- describe함수를 사용하면 it함수나 test함수를 하나의 파일에 여러 개 포함할 수 있습니다.

describe('간단한 테스트들', () => {
  test('2 더하기 2는 4', () => {
   expect(2 + 2).toBe(4);
  });
  test('2 빼기 1은 1', () => {
    expect(2 - 1).toBe(1);
  });
});

- describe 함수 블록은 Test Suites라고 불리며 test/it 함수 블록은 Test(Test Case)라고 합니다.

---

출처

코드스테이츠