Unit7 - [Testing] TDD

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

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

 

TDD의 개발 주기

 

• Write Failing Test: 실패하는 테스트 코드를 먼저 작성
• Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성
• Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행

TDD를 사용하는 이유

예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문

 

테스트 코드를 작성

describe, it, assert, expect 프레임 워크에서 제공하는 테스트 작성을 위한 도구

 

ex) mocha라는 테스트 프레임워크와 chai라는 라이브러리를 사용

 

 

React 환경에서 테스트

React에서 테스트는 Testing Library, Jest를 이용

create-react-app을 이용하여 React 프로젝트를 생성하면 자동으로 Testing Libarary를 이용

Jest는 JavaScript의 Testing Framework / Test Runner로써, 테스트 파일을 자동으로 찾아 테스트를 실행

 

• @testing-library/jest-dom : jest-dom에서 제공하는  custom matcher를 사용
• toBeInTheDocument: 요소가 DOM에 존재하는지 확인
• toBeDisabled: 요소가 비활성화(disabled)되어 있는지 확인
• toBeEmptyDOMElement: 요소가 비어있는 DOM 요소인지 확
• toBeVisible: 요소가 화면에 보이는(visible) 상태인지 확인
• toHaveTextContent: 요소의 텍스트 내용이 일치하는지 확인
• toHaveAttribute: 요소가 지정된 속성(attribute)을 가지고 있는지 확인
• toHaveClass: 요소가 지정된 클래스(class)를 가지고 있는지 확인
• @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();

});

jest함수로 테스트 실행할때 이용하는 함수

 

이 코드는 앱이 예상대로 렌더링되고 'learn react'라는 텍스트를 포함하는 요소가 문서에 존재하는지를 검사하여 테스트의 성공 여부를 확인

render 함수는 테스트 환경에서 컴포넌트를 렌더링하고,

해당 결과물을 테스트하기 위해 가상 DOM을 생성

이 함수는 테스트 러너에게 테스트 중인 컴포넌트를 렌더링하고, 그 결과물을 반환

 

screen 객체는 테스트에서 가상 DOM 요소를 검색할 수 있는 함수를 제공

예를 들어 screen.getByText() 함수를 사용하면, 해당 텍스트를 가진 요소를 찾아 반환

 

test 함수, expect 함수는 Jest의 함수고,

toBeInTheDocument는 jest-dom 라이브러리에 포함된 Custom matchers이다.

 

npm run test

a 키를 누르니 pass메시지 확인

jest-dom은 src 폴더의 setupTests.js 파일 내에서 import 삭제하면 toBrInTheDocument 함수 이용 X

 

src폴더에 파일명.test.js 파일을 작성 -> Jest가 테스트 파일로 판단

 

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

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

 

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


test('2 빼기 1는 1', ()=>{
    expect(2-1).toBe(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;

이 코드는 React 함수 컴포넌트를 사용하여 조명(Light)을 ON/OFF할 수 있는 간단한 UI를 구현한 것

컴포넌트의 첫 번째 인수는 "name" prop으로, 사용자가 전달한 문자열을 표시

 

이 컴포넌트는 HTML 요소를 반환

요소에는 "name" prop의 값과 현재 조명 상태(light 변수의 값)가 포함된 h1 요소가 있다.

ON 버튼을 클릭하면 setLight 함수를 사용하여 "light" 상태를 true로 업데이트하고

OFF 버튼을 클릭하면 "light" 상태를 false로 업데이트로 업데이트한다.

 

 

disabled 속성은 HTML 요소에 대한 속성으로, 해당 요소가 비활성화(disabled)되었는지 여부를 나타낸다.

요소가 비활성화되면 사용자가 해당 요소를 클릭하거나 입력할 수 없다.

 

disabled 속성은 boolean 값 (true/false)을 가지며, true로 설정하면 요소가 비활성화되고 false로 설정하면 요소가 활성화

 

ON 버튼을 누르면 ON 버튼이 비활성화되고, OFF 버튼이 활성화됩니다. OFF 버튼을 누르면 OFF 버튼이 비활성화되고, ON 버튼이 활성화한다.

 

import { fireEvent,render, screen } from '@testing-library/react';
//이벤트의 유무도 테스트, fireEvent를 import
import Light from './Light';

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

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

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

it('change from off to on', () => {
	render(<Light name="전원" />);
	const onButtonElement = screen.getByRole('button', { name: 'ON' });
	fireEvent.click(onButtonElement);
	expect(onButtonElement).toBeDisabled();
})
//버튼 클릭 이벤트의 유무 테스트
});

});

버튼 클릭 이벤트의 유무 테스트에서

fireEvent.click(onButtonElement)는 onButtonElement 요소를 클릭한다.

이로 인해 Light 컴포넌트에서 버튼 클릭 핸들러가 호출되어 전원이 켜지게 된다.

Light 컴포넌트에서 전원이 켜지면 버튼이 비활성화되도록 구현되어 있다.

Light가 제대로 동작하는지 테스트하기 위한 코드이다.