TDD

의미

💡 Test-driven Development
💡 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론
💡 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것

과정

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

✅ Write Failing Test의 과정을 마치기 전에 Make Test Pass의 작업을 시작하지 않도록
✅ Make Test Pass를 진행할 때에는, Write Failing Test의 테스트를 통과할 정도의 최소 코드만 작성

사용하는 이유

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

테스트 오픈소스 프레임워크

💡 mocha, chai, jest 등
💡 JavaScript 내장 기능이 아니라 테스트 프레임워크에서 제공하는 테스트 작성을 위한 도구인 describe, it, assert, expect의 사용

Mocha

함수를 실행할 때 오류가 발생하면, 실패.
오류가 발생하지 않으면, 실패하지 않음

describe("테스트 대항목", function () {
   it("오류가 발생하지 않으면, 실패하지 않음", function () {
    let even = function (num) {
      return num % 2 === 0;
    };
    return even(10) === true;
  });

  it("오류가 발생하면, 실패", function () {
    let even = function (num) {
      return num / 2 === 0;
    };

    if (even(10) !== true) {
      throw new Error("에러!");
    }
  });
});

📗 if/throw 구문으로 오류 체크

describe("테스트 대항목", function () {
  it("오류 체크 항목", function () {
    if (함수("테스트 내용") !== "정답") {
      throw new Error("Test failed");
    }
  });

});

📗 입력값이 true가 아닐 경우 에러를 발생

describe("테스트 대항목", function () {
  let assert = function (isTrue) {
    if (!isTrue) {
      throw new Error("Test failed");
    }
  };

  it("오류 체크 항목", function () {
    assert(함수("테스트 내용") === "정답");
  });

});

Chai

테스트에 필요한 헬퍼 함수들이 담긴 라이브러리

//index.test.js
global.chai = require("chai");
global.함수 = require("../함수.js");

describe("테스트 큰 항목", function() {
  require("../함수.test.js");
});

📗 assert

describe("테스트 대항목", function () {
  let assert = chai.assert;

  it("테스트 소항목", function () {
    assert(함수("테스트 내용") === "정답");
  });
});

📗 expect

describe("테스트 대항목", function () {
  let expect = chai.expect;

  it("테스트 소항목", function () {
    expect(함수("테스트 내용")).to.equal("정답");
  });
});

📗 should

describe("테스트 대항목", function () {
  let should = chai.should();

  it("테스트 소항목", function () {
     should.equal(함수("테스트 내용"), "정답");
  });
});

✅ expect나 should 둘 중에 한가지 방법을 선택

Jest

npx create-react-app 실행하면 package.json에서 확인 가능

{
 //...
 "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-scripts": "5.0.1",
    "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 등 사용자 이벤트에 이용

📗 기본 내장 테스트

//src/setupTests.js
import '@testing-library/jest-dom';

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

test('renders learn react link', () => {
  //테스트하고자 하는 컴포넌트를 render()함수로 전달
  render(<App />);
  //App 컴포넌트 중 "learn react"라는 문자열이 있는지 확인
  //i로 대소문자를 가리지 않음
  const linkElement = screen.getByText(/learn react/i);
  //toBeInTheDocument 함수는 matchers 함수
  expect(linkElement).toBeInTheDocument();
});

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

📗 기본 테스트

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

✅ toBe 함수는 matchers 함수 중 하나

📗 컴포넌트 테스트

//Light.js
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;

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

describe("Light Component tests", () => {
   it('renders Light Component', () => {
	 render(<Light name="전원" />);
	 const nameElement = screen.getByText(/전원 off/i);
	 expect(nameElement).toBeInTheDocument();
   })

   it('on button enable', () => {
     render(<Light name="전원" />);
     const onButtonElement = screen.getByRole('button', { name: 'ON' });
     //disabled가 아님
     expect(onButtonElement).not.toBeDisabled();
   });

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