S4) Unit 7. [Testing] TDD

📣 TDD

𝟭. TDD(Test-driven Development)란?

✔️ 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론

➰ 개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 방법

➰ 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다.

TDD의 개발주기

 

𝟮. TDD의 개발주기

1️⃣ Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다.

2️⃣ Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다.

3️⃣ Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다.

 

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

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

 

𝟯. TDD를 사용하는 이유

✔️ 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있다.

---

📣 React 환경에서 테스트하기

✔️ React에서 테스트는 Testing Library, Jest를 이용해서 할 수 있다.

➰ create-react-app을 이용하여 React 프로젝트를 생성하면 자동으로 Testing Libarary를 이용할 수 있다.

    ㄴ Testing Library는 테스트를 실행하고 싶은 컴포넌트나 클릭 이벤트 등에 사용할 수 있다.

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

 

𝟭. React 기본 테스트 환경 확인하기

1-1) 새로운 React 프로젝트 생성하기

➰ package.json 파일을 확인하면 dependencies 안에 @testing이라는 접두어가 붙은 라이브러리를 확인할 수 있다.

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

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

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

 

1-2) 테스트 파일 확인하기

➰ 다시 src 폴더 안을 확인해 보면, setupTests.js 와 App.test.js 라는 이름의 파일을 확인할 수 있고, App.test.js 파일에는 간단한 테스트가 이미 만들어져 있다.

➰ test 함수는 Jest 함수로 테스트를 실행할 때 반드시 이용하는 함수로, 첫 번째 인자는 테스트가 어떤 내용인지 나중에 다시 읽어도 테스트 내용을 알 수 있는 설명을 작성하고 두 번째 인자는 하고자 하는 테스트를 함수의 형태로 넣는다.

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

test('renders learn react link', () => {
    render(<App />);
    // 테스트하고자 하는 컴포넌트를 render()함수로 전달
    // eact-testing-library에서는 테스트를 진행할 컴포넌트를 render()함수의 인자로 전달한다.
    const linkElement = screen.getByText(/learn react/i);
    // ender()에서 가져온 App 컴포넌트 중 "learn react"라는 문자열이 있는지 확인하여 linkElement에 할당한다.
    expect(linkElement).toBeInTheDocument();
    // expect 함수의 인자로 지정한 요소가 document.body에 존재하는지 toBeInTheDocument 함수를 사용하여 체크한다.
    // toBeInTheDocument 함수는 matchers 함수라고 부른다.
});

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

➰ 아직 jest-dom을 import 하지 않았는데도 toBeInTheDocument를 사용할 수 있는 이유는 src 폴더의 setupTests.js 파일 내에서 import 되고 있기 때문이다.

 

1-3) 간단한 테스트 직접 만들기

➰ 파일명을 <파일명>.test.js로 하고 테스트를 작성하면, Jest가 테스트 파일로 판단해서 작동한다.

➰ 덧셈의 간단한 테스트

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

// toBe 함수는 matchers 함수 중 하나로 expect 함수에 지정한 값이 toBe 함수에 지정한 값과 일치하는지 체크한다.

➰ npm run test를 실행하여 "a"를 선택하면 Example.test.js와 App.test.js가 모두 실행이 된다.

 

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

// test 함수 대신 it 함수를 사용해도 같은 결과가 나오며
// describe함수를 사용하면 it함수나 test함수를 하나의 파일에 여러 개 포함할 수 있다.

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

 

𝟮. 직접 만든 컴포넌트 테스트하기

2-1) 컴포넌트 만들기

import {useState} from 'react';

function Light({ name }) {
	const [light, setLight] = useState(false);

	return (
		<div>
			<h1>
				{name} {light ? 'ON' : 'OFF'}{' '}
			</h1>
			<button
				onClick={() => setLight(true)}
				disabled={light ? true : false}
			>
				ON
			</button>
			<button
				onClick={() => setLight(false)}
				disabled={!light ? true : false}
			>
				OFF
			</button>
		</div>
	);
}

export default Light;

// 전원의 상태를 OFF에서 ON으로 전환하는 컴포넌트

 

2-2) 컴포넌트 테스트하기

// Light.test.js

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

it('renders Light Component', () => {
	render(<Light name="전원" />);
	const nameElement = screen.getByText(/전원 off/i);
    // props로 전달된 전원이 올바르게 표시되어 있는지 확인
	expect(nameElement).toBeInTheDocument();
})

------------------------------------------------------------------------

it('off button disabled', () => {
	render(<Light name="전원" />);
	const offButtonElement = screen.getByRole('button', { name: 'OFF' });
	expect(offButtonElement).toBeDisabled();
    // 현재 OFF버튼이 disabled 상태라는 것을 테스트 하기
})

------------------------------------------------------------------------

it('on button enable', () => {
  render(<Light name="전원" />);
  const onButtonElement = screen.getByRole('button', { name: 'ON' });
  expect(onButtonElement).not.toBeDisabled();
  // ON 버튼이 disabled가 아니라는 것을 테스트 하기
});

------------------------------------------------------------------------

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

it('change from off to on', () => {
	render(<Light name="전원" />);
	const onButtonElement = screen.getByRole('button', { name: 'ON' });
	fireEvent.click(onButtonElement);
    // 버튼 클릭 이벤트의 유무 테스트 하기
    // fireEvent의 click메서드에 전달인자로 테스트하고자 하는 요소를 전달
	expect(onButtonElement).toBeDisabled();
})