테스트 주도 개발(Test driven devlopment, TDD)

Posted a year Updated a year

By 베짱이가 되고싶은 개미。

소프트웨어를 전문적으로 개발하는 기업들은 서비스의 안정적인 운영과 서비스의 품질을 확보하기 위해 테스트 코드를 작성하고 관리하고 있다. 다시 말하면 서비스의 품질을 확보하기 위해서는 테스트 코드 작성이 필수라는 것이다.

테스트 주도 개발이라는 개념이 나오기 전에는 우리가 지금까지 해온 것과 같이 움직이는 소프트웨어를 개발한 후 해당 소프트 웨어에 대한 테스트 코드를 작성하는 방식을 사용해 왔다. 이 방식을 사용하면 다음과 같은 문제점들이 있다.

다른 사람이 작성한 소스 코드 또는 내가 예전에 작성한 코드에 대해 테스트 코드를 작성해야 하는데 이 코드가 어떻게 동작하는지 알 수 없거나 기억할 수 없음으로 코드를 다시 분석하고 테스트 코드를 작성해야 한다.
작성된 코드가 테스트하기 쉽게 작성되어 있지 않다. 따라서 테스트 코드를 작성하기가 불가능 하거나 테스트 코드를 작성하기 위해 이미 작성된 코드를 수정해야 할 경우가 발생한다. 이때 기존 코드의 수정으로 인해 예기치 않은 문제가 발생할 수 있다.

이런 문제를 해결하기 위해 켄트백(Kent Beck)은 테스트 코드를 먼저 작성하는 테스트 주도 개발론을 제안하게 되었다. 테스트 줃 개발 방벙론은 테스트 프레임워크 등을 사용하여 자동화된 테스트 시스템에서 미리 정의된 사양을 바탕으로

Jest 테스트 프레임워크로 테스트 코드 작성하기

Jest는 주로 JavaScript 및 TypeScript 애플리케이션을 테스트하기 위해 사용되는 JavaScript 테스팅 프레임워크로 특히 React 애플리케이션 테스트에 최적화되어 있다. 페이스북(현 메타)에서 개발했으며, React 외에도 다른 JavaScript 프레임워크나 라이브러리와도 잘 작동한다.

Jest의 주요 쿼리 함수

describe 함수

describe함수는 jest가 제공하는 함수로써 여러 테스트를 한 그룹으로 묶고 설명을 붙이기 위해 사용한다.

첫번째 매개변수는 명령 프롬프트에 표시할 설명
두번째 매개변수는 여러 테스트를 그룹으로 묶을 콜백 함수

describe('test index.js file', () => {

});

it 함수

it함수는 실제 테스트가 실행되는 테스트 명세를 작성할 때 사용한다.

첫번째 매개변수는 테스트 명세의 설명
두 번째 매개변수에는 실제로 테스트를 실행하는 테스트 코드를 작성

it('sum 1+2 to equal 3', () => {
      
});

expect 함수

expect 함수는 주로 테스트 프레임워크에서 테스트 결과를 확인하기 위해 사용되는 메서드나 함수이다. expect 함수는 테스트 대상이 특정 조건을 만족하는지, 즉 예상된 동작을 수행하는지를 검증하는 역할이다.

it('sum 1+2 to equal 3', () => {
      expect(sum(1,2)).toBe(3);
});

여기서 sum(1,2)는 테스트 대상이 실제로 생성한 값이고, 3는 기대하는 값이며 toBe는 일치 여부를 확인하는 메서드이다.

expect는 단순한 값 비교 외에도 다양한 일치 조건을 제공한다. 예를 들어, 두 객체가 동일한지, 배열이 특정 요소를 포함하는지, 함수가 특정 예외를 던지는지 등을 확인할 수 있다.

// 객체나 배열의 동등성 비교
expect(actualValue).toEqual(expectedValue); 

// 배열이 특정 아이템을 포함하는지
expect(array).toContain(item); 

// 함수가 특정 오류를 던지는지
expect(() => functionCall()).toThrow(ErrorType);

@testing-library로 리액트 컴포넌트 테스트 코드 작성 하기

@testing-library는 DOM 테스팅 라이브러리(DOM Testing Library)이다. @testing-library는 사용자 중심 방식으로 UI 컴포넌트를 테스트하는데 도움을 주는 라이브러리이며 리액트 컴포넌트의 테스트 코드 작성을 도와준다.

테스트 코드를 작성할 때 컴포넌트 세부 구현사항을 포함하지 않으면서도 신뢰할 수 있는 테스트 코드 작성에 도움을 준다. 이렇게 컴포넌트의 세부 구현 사항을 포함하지 않은 테스트 코드를 작성하면 컴포넌트의 세부 구현 부분을 리팩토링 하여도 테스트 코드를 수정할 필요가 없다, 이로 인해 한번 작성한 테스트 코드는 긴 시간 유지할 수 있으며 오랜 기간 유지 가능하여 테스트 코드를 자주 수정하지 않아도 되므로 개발 생산성을 향상 시켜 준다.

App.js 컴포넌트 - 렌더링 테스트

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

test

test 함수(it 함수와 같은 역할을 하는 함수)를 사용하여 테스트 명세를 작성한 테스트 코드이다.

render

리액트 컴포넌트를 화면에 표시하기 위함

screen

리액트 컴포넌트가 표시된 화면을 의미한다.

GetByText

getByText 함수는 주어진 텍스트를 포함하는 DOM 요소를 찾는 데 사용된다. 렌더링된 컴포넌트에서 screen.GetByText를 통해 화면에서 'learn react'라는 글자를 가지고 있는 돔 요소를 찾는다.

import { render, screen } from '@testing-library/react';
import App from './App';
        
test('renders Hello World text', () => {
  render(<App />);
  const textElement = screen.getByText('Hello World');
  expect(textElement).toBeInTheDocument();
});

toBeInTheDocument

요소를 찾아 jest expect().toBeInTheDocument()를 사용하여 돔에 표시되어 있는지 확인 한다.
render 함수는 메모리상에 돔을 만들고 screen을 통해 해당 돔에 접근 하는 것을 의미한다. react-testing-library의 render 함수를 사용하여 App이라는 컴포넌트를 렌더링 하였다.

React Testing Library의 주요 쿼리 함수

getByText

주어진 텍스트를 포함하는 요소를 찾습니다.
ex) screen.getByText(/learn react/i)는 대소문자를 구분하지 않고 "learn react"라는 텍스트를 포함하는 요소를 찾습니다.

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();
});

getByRole

특정 역할(예: 버튼, 링크)을 가진 요소를 찾습니다.
screen.getByRole('button', { name: /submit/i })은 "submit" 텍스트를 가진 버튼을 찾습니다.

import { render, screen } from '@testing-library/react';
import App from './App';
        
test('renders submit button', () => {
  render(<App />);
  const buttonElement = screen.getByRole('button', { name: /submit/i });
  expect(buttonElement).toBeInTheDocument();
});

getByLabelText

특정 라벨 텍스트와 연결된 요소(주로 폼 필드)를 찾습니다.
screen.getByLabelText('Username')은 "Username" 라벨을 가진 입력 필드를 찾습니다.

import { render, screen } from '@testing-library/react';
import LoginForm from './LoginForm';
        
test('finds the username input', () => {
  render(<LoginForm />);
  const inputElement = screen.getByLabelText('Username');
  expect(inputElement).toBeInTheDocument();
});

getByPlaceholderText

특정 플레이스홀더 텍스트를 가진 입력 요소를 찾습니다.
screen.getByPlaceholderText('Enter your username')은 "Enter your username" 플레이스홀더를 가진 입력 필드를 찾습니다.

import { render, screen } from '@testing-library/react';
import LoginForm from './LoginForm';
        
test('finds the input by placeholder', () => {
  render(<LoginForm />);
  const inputElement = screen.getByPlaceholderText('Enter your username');
  expect(inputElement).toBeInTheDocument();
});

getByAltText

주어진 alt 텍스트를 가진 이미지를 찾습니다.
screen.getByAltText('Profile Picture')은 "Profile Picture" alt 텍스트를 가진 이미지를 찾습니다.

import { render, screen } from '@testing-library/react';
import Profile from './Profile';
        
test('finds the profile picture', () => {
  render(<Profile />);
  const imageElement = screen.getByAltText('Profile Picture');
  expect(imageElement).toBeInTheDocument();
});

getByTestId

data-testid 속성을 사용하여 요소를 찾습니다.
screen.getByTestId('custom-element')은 data-testid="custom-element" 속성을 가진 요소를 찾습니다.

import { render, screen } from '@testing-library/react';
import Component from './Component';
        
test('finds element by test id', () => {
  render(<Component />);
  const element = screen.getByTestId('custom-element');
  expect(element).toBeInTheDocument();
});

queryByText

요소가 존재하지 않거나, 하나만 존재할 때 사용합니다. 존재하지 않으면 null을 반환합니다.
getByText는 요소가 없으면 에러를 던집니다.

import { render, screen } from '@testing-library/react';
import App from './App';
        
test('does not find non-existing text', () => {
  render(<App />);
  const textElement = screen.queryByText('Non-existing Text');
  expect(textElement).toBeNull();
});

findByText

비동기적으로 요소를 찾을 때 사용합니다. 주로 요소가 나중에 렌더링될 경우에 사용합니다. 반환 값은 Promise입니다.

import { render, screen } from '@testing-library/react';
import App from './App';
        
test('renders welcome message', async () => {
  render(<App />);
  const messageElement = await screen.findByText(/welcome/i);
  expect(messageElement).toBeInTheDocument();
});

참고할만한 예제들

예제 [1] - 컴포넌트가 올바르게 렌더링되는지를 확인하는 테스트 케이스

에 대한 Jest 테스트 스위트를 작성한 것으로 컴포넌트가 올바르게 렌더링되는지를 확인하는 하나의 테스트 케이스를 포함하고 있다.

관련 키워드

render

getElementByClassName

toHaveLength

toHaveAttribute

describe('<App />', ()=>{
it('renders component correctly', ()=>{      
      ① const { container } = render(<App />);              
      ② expect(container.getElementByClassName('App-logo')).toHaveLength(1);       
      ③ expect(container.getElementByClassName('App-logo')[0]).toHaveAttribute('src','logo.svg');
    })
})

① 이 줄은 컴포넌트를 렌더링한다. render 함수는 컴포넌트를 가상 DOM에 렌더링하고, 반환된 객체에서 container를 구조 분해 할당하여 가져오며 container는 렌더링된 DOM 트리를 포함한다. ② 이 줄은 container 안에 'App-logo' 클래스를 가진 요소가 하나 있는지 확인한다. expect 함수는 기대값을 설정하는 데 사용되고, toHaveLength(1)는 요소의 길이가 1인지 확인한다. ③ 이 줄은 'App-logo' 클래스를 가진 첫 번째 요소가 'src' 속성을 가지고 있으며, 그 값이 'logo.svg'인지 확인한다. toHaveAttribute('src', 'logo.svg')는 요소의 src 속성이 'logo.svg'인지를 확인한다.

예제 [2] - <img /> 테스트 코드

관련 키워드

render

getElementsByTagName

toHaveLength

toHaveTextContext

describe('<App />', ()=>{
it('renders component correctly', ()=>{
      ①const { container } = render(<App />);  
      ② expect(container.getElementsByTagName('p')).toHaveLength(1);
      ③ expect(container.getElementsByTagName('p')[0]).toHaveTextContext('Edit src/App.js and save to reload.')
   })
})

① 이 줄은 컴포넌트를 렌더링한다. render 함수는 컴포넌트를 가상 DOM에 렌더링하고, 반환된 객체에서 container를 구조 분해 할당하여 가져오며 container는 렌더링된 DOM 트리를 포함한다. ② 이 줄은 container 안에

태그를 가진 요소가 하나 있는지 확인한다. expect 함수는 기대값을 설정하는 데 사용되고, toHaveLength(1)는 해당 요소의 길이가 1인지 확인한다. ③ 이 줄은

태그를 가진 첫 번째 요소가 'Edit src/App.js and save to reload.'라는 텍스트 내용을 가지고 있는지 확인한다. expect 함수는 기대값을 설정하는 데 사용되고, toHaveTextContent('Edit src/App.js and save to reload.')는 해당 요소의 텍스트 내용이 정확히 일치하는지를 확인한다.

예제 [3] - <p/> 테스트

describe('<App />', ()=>{
  it('renders component correctly', ()=>{
      const { container } = render(<App />);    
      expect(container).toMatchSnapshot();
    })
})

toMatchSnapshot가 실행되면 src/snapshots/App.test.js.snap이라는 파일이 생성된 것을 확인 할 수 있다. 파일을 열어 내용을 확인해 보면 App 컴포넌트가 화면에 렌더링될 때 표시되는 HTML 내용이 저장된 것을 확인 할 수 있다.
저장된 스냅샷은 App 컴포넌트가 수정되어 화면에 표시되는 HTML 구조가 변경되면 에러를 표시하게 된다. 이렇게 스냅샷은 화면에 표시되는 컴포넌트가 변경되었는지 감지하기 위한 테스트로 많이 사용된다.

예제 [4] - 스냅샷 (화면에 표시되는 내용이 변경 되었는지 체크)

관련 키워드

getByText

parentElement

toHaveStyleRule

Button 컴포넌트는 Props만을 가지는 단순 컴포넌트이다. Button 컴포넌트가 화면에 잘 표시 되는지, Props가 잘 적용되는지를 확인하도록 한다.

import React from 'react';
import { render, screen } from 'testing-library/react';
import 'jest-styled-components';
import {Button} from './index';

describe('<Button />', ()=>{
  it('renders component correctly', ()=>{
        ① const { container } = render(<Button label="Button Test" />);

        ② const label = screen.getByText("button Test");
           expect(label).toBeInTheDocument();

        ③ const parent = label.parentElement;
        ④ expect(parent).toHaveStyleRule('background-color', '#304FFE');
          expect(parent).toHaveStyleRule('background-color', '#1E40FF', { modifier:'hover'});
        
        ⑤ expect(container).toMatchSnapshot();
    })
})

① render 함수는 를 가상 DOM에 렌더링하고, 반환된 객체에서 container를 구조 분해 할당한다.

② screen.getByText를 사용하여 "Button Test"라는 텍스트를 가진 요소를 찾는다. expect로 해당 요소가 문서에 존재하는지 확인한다.

③ label 요소의 부모 요소(parentElement)를 가져온다.

④ expect를 사용하여 부모 요소가 특정 스타일 규칙을 가지고 있는지 확인한다. jest-styled-components의 toHaveStyleRule을 사용하여 다음 두 가지 스타일 규칙을 확인한다.

기본 배경색이 #304FFE인지
hover 상태에서 배경색이 #1E40FF인지

backgroundColor과 hoverColor은 우리가 screen.getByText로 찾은 Label 컴포넌트가 아닌 Label 컴포넌트의 부모 요소인 Container 컴포넌트에 설정이 된다. 따라서 label.parentElement를 사용해 Label 컴포넌트의 부모 요소(Container 컴포넌트)에 접근하여 값이 잘 설정 되었는지 확인 한다.

Button 컴포넌트는 Props로 BackgroundClolor과 hoverColor이 설정되어 있지 않으면 기본값이 설정되도록 개발 되었다. backgroundColor과 hoverColor가 설정되어 있지 않은 상황에서 기본값이 잘 설정되는지 확인하기 위해 jest-styled-components의 새로운 Matcher인 toHaveStyleRule를 사용하여 확인 하도록 한다.

⑤ 마지막으로, container의 현재 상태를 스냅샷으로 저장하여 이후 테스트 실행 시 컴포넌트의 출력이 변하지 않았는지 확인합니다.

예제 [4] - onClick 함수 테스트

Button 컴포넌트의 onClick 함수를 테스트 하기 위한 테스트 명세이다.

it('clicks the button', () => {
    ① const handlerClick = jest.fn(); 
    ② render(<Button label="Button Test" onClick={handlerClick} />); 
    ③ const label = screen.getByText('Button Test'); 
    ④ expect(handleClick).toHaveBeenCalledTimes(0); 
    ⑤ fireEvent.click(label); 
    ⑥ expect(handlerClick).toHaveBeenCalledTimes(1); 
});

① 클릭 핸들러 함수로 jest.fn()을 사용하여 mock 함수 생성
② Button 컴포넌트를 렌더링하고, onClick props에 mock 함수 전달
③ 화면에서 "Button Test" 라는 텍스트를 가진 요소를 찾음
④ 클릭 이벤트가 발생하지 않았는지 확인
⑤ 찾은 요소에 클릭 이벤트를 발생시킴
⑥ 클릭 이벤트 핸들러가 한 번 호출되었는지 확인

그다음 화면에 표시된 버튼 컴포넌트를 찾아서 아직 해당 컴포넌트를 클릭하지 않았음을 확인하기 위해 toHaveBeenCalledTimes 함수를 사용하여 우리가 만든 모의함수가 잘 호출되었는지 확인해준다.

예제 [5] - <Input /> 입력된 값이 일치 체크

관련 키워드

getByDisplayValue

getByPlaceholderText

fireEvent

fireEvent.change

📝 getByDisplayValue를 이용하여 input을 찾아 렌더링 하는 예제

import React from 'react';
import { render, screen, fireEvent } from 'testing-library/react';
import 'jest-styled-components';
import {Input} from './index';

describe('<Input />', ()=>{
	it('renders component correctly', ()=>{
      ① const { container } = render(<Input value="default value" />);
      ② const label = screen.getByDisplayValue("default value");
      ③ expect(label).toBeInTheDocument();
      ④ expect(container).toMatchSnapshot();
   })
})

이 코드는 React 컴포넌트 를 테스트하기 위해 작성된 Jest 테스트 파일이다. react-testing-library와 jest-styled-components를 사용하여 컴포넌트의 렌더링 및 동작을 한다.

① render 함수는 컴포넌트를 렌더링합니다. 여기서 value prop으로 "default value"를 설정합니다.
② screen.getByDisplayValue 함수는 주어진 값("default value")을 표시하는 요소를 검색합니다.
　여기서는 컴포넌트가 "default value"라는 값을 가진 입력 필드를 렌더링하는지 확인합니다.
③ expect 함수는 단언(assertion)을 정의합니다. 여기서는 label 요소가 문서 내에 존재하는지 확인합니다. 　toBeInTheDocument 매처는 요소가 실제로 DOM에 존재하는지 확인합니다.

Input 컴포넌트는 Button 컴포넌트와 다르게 필수 Props가 존재하지 않는다. 따라서 화면에 표시되었는지를 알기 위해 검색(Query)할 방법이 없다.
그래서 Input 컴포넌트의 필수가 아닌 Props인 value값을 설정하고 react-testing-library의 screen.getByDisplayValue를 사용하여 input 컴포넌트를 찾는다.

📝 getByPlaceholderText를 이용하여 input을 찾아 렌더링 하는 예제

it('renders placeholder correctly', ()=>{
    render(<Input placeholder="default placeholder" />);

    const input = screen.getByPlaceholderText("default placeholder");
    expect(input).toBeInTheDocument();        
})

📝 fireEvent를 이용하여 이벤트 테스트 하는 예제

import { render, screen, fireEvent } from 'testing-library/react';

it('renders placeholder correctly', ()=>{
    render(<Input placeholder="default placeholder" />);
        
    const input = screen.getByPlaceholderText("default placeholder") as HTMLInputElement;
        
    fireEvent.change(input, {target:{ value:'study react'}})
    expect(input.value).toBe('study react')
})

Input 컴포넌트의 placeholder를 사용하여 Input 컴포넌트를 화면에 표시하고 해당컴포넌트를 getByPlaceholderText를 통해 찾았다. 이렇게 찾은 컴포넌트는 기본적으로 HTMLElement타입이다. 하지만 HTML의 input 태그를 사용하고 있으므로, 타입스크립트의 as를 사용하여 HTMLInputElement로 타입변환을 해준다.

fireEvent의 change함수로 실제 사용자가 데이터를 입력하는 테스트 코드를 작성 해준다. 앞에서 찾은 Input 컴포넌트에 데이터를 입력해주고 입력된 데이터가 실제로 화면에 잘 표시 되고 있는지를 확인하기 위해 toBe를 사용하여 input, value값이 우리가 fireEvent를 사용하여 입력한 값과 같은지 확인 하였다.