TIL: 2022-12-02

⚙️ 오늘 배운 주제

TDD (Test Driven Development)

 

🐹 오늘의 기분

이번 유닛에서는 그 동안 섹션 거쳐오면서 쭉 봐왔던 테스트 코드를 직접 작성해보는 과제를 했다. koans에서 맛보기로 해봤었지만 그 때는 빈 칸만 채우는 거였는데 이번에는 TDD가 뭔지, 테스트 라이브러리와 프레임워크를 배워보면서 처음부터 작성하는 거였다. 테스트 코드 없이 브라우저 console에 일일이 경우의 수를 다 작성하면서 테스트하는 과정도 거쳤는데 확실히 정말정말 불편했다. 테스트 코드를 작성해놓으면 커맨드 하나로 통과 여부를 한 번에 확인해놓을 수 있으니 훨씬 효율이 올라가겠다는 생각이 들었다. 리액트에서 테스트 코드를 쓰는 법도 배웠는데 이건 연습이 더 필요할 것 같당 

오늘 과제는 크게 어렵지는 않았다. 초반에 자잘한 부분이 자꾸 걸려서 노가다를 반복해야 하는 것이 다소 쉽지 않았을 뿐 ㅎㅎ 테스트가 하나하나 통과하는 데서 오는 쾌감이 좋았다. 

🗝 키워드

TDD, mocha, chai, Jest

 

🗣 스스로에게 설명

mocha = 테스트 프레임워크

chai = 테스트 라이브러리

리액트에서는 Testing Library와 Jest를 쓴다.

 

TDD

Test Driven Development

테스트를 먼저 작성하고 테스트 통과 여부를 확인하며 개발하는 개발 방법론 

1. Write Failing Test
2. Make Test Pass
3. Refactor

애초에 실패할 테스트 코드를 작성한 후 그 테스트 코드가 통과되도록 만들고 리팩토링한다.

예상치 못한 버그를 줄여 소요 시간을 줄일 수 있음

// in React
// describe: Test Suites
describe("simple test", () => {
  // test, it: test case
  test("5 더하기 2는 7", () => {
    expect(5 + 2).toBe(7);
  });

  test("4 빼기 2는 2", () => {
    expect(4 - 2).toBe(2);
  });
});

하나의 테스트 케이스는 test나 it으로 작성하며 describe의 두 번째 인자 콜백함수를 이용하여 테스트 케이스를 여러 개 작성할 수도 있다.

 

// in JS
describe("테스트 묶음", function () {
  it("테스트 문구", function () {
    if (테스트가 통과하지 않는조건) {
      throw new Error("Test failed!");
    };
  };
});

describe("테스트 묶음", function () {
// 반복되는 if-throw문을 함수화
// assert 함수는 테스트 코드가 true가 아니면 에러를 출력
  let assert = function (isTrue) {
    if (!isTrue) {
      throw new Error("Test failed");
    }
  };

  it("테스트 문구", function () {
    assert(테스트 내용);
  });
});

assert함수와 같은 메소드는 chai 라이브러리에 구현되어 있다. 

이 외에도 should나 expect가 있는데 어느 것을 사용하는지는 중요하지 않고 한 방법을 일관적으로 사용하는 것이 좋다. 

(특히, should와 expect는 같이 쓰면 안된다고 한다.)

// chai.assert
describe("테스트 묶음", function () {
  let assert = chai.assert;

  it("테스트 문구", function () {
    assert(테스트 코드);
  });

  it("테스트 문구", function () {
    assert(테스트 코드);
  });
});

// chai.expect
describe("테스트 묶음", function () {
  let expect = chai.expect;

  it("테스트 문구", function () {
    expect(테스트 코드).to.equal(결과);
  });

  it("테스트 문구", function () {
    expect(테스트 코드)to.equal(결과);
  });
});

// chai.should
describe("테스트 묶음", function () {
  let should = chai.should();

  it("테스트 문구", function () {
    should.equal(테스트 코드, 결과);
  });

  it("테스트 문구", function () {
    should.equal(테스트 코드, 결과);
  });
});

 

create-react-app으로 리액트 앱을 설치하면 테스트를 위한 세 가지 라이브러리가 함께 설치된다

1. @testing-library/jest-dom : custom matcher를 사용할 수 있게 해줌
2. @testing-library/react : 컴포넌트의 요소를 찾기 위한 query가 포함됨
3. @testing-library/user-event : click과 같은 사용자 이벤트에 이용됩니다.

그리고 기본적으로 App.test.js라는 파일이 생성된 채로 디렉토리가 형성된다.

테스트하고 싶은 컴포넌트를 render 함수의 인자로 전달하여 screen의 메소드로 검사할 요소를 지정한 후 expect함수에 넣어 결과를 확인하는 방식이다

// 기본으로 생성되는 테스트 파일
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();
});

// 정규표현식으로 화면에서 learn react라는 문구를 선택하여 변수에 할당
// expect로 app 컴포넌트에 learn react라는 문구를 가진 요소가 문서에 존재하는지 확인

🔍 공부가 더 필요한 부분

써도써도 헷갈리는 정규표현식

Jest-dom에 존재하는 다양한 matcher 함수들

screen에 있는 메소드들 등..