230912(화)

🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

⚛️ 키워드: 직관적이고 쉽고 간단하게 작성

테스트 코드

• 소프트웨어 테스트는 소프트웨어가 의도한대로 동작하는지를 확인하는 과정이다.
• 테스트 코드는 테스트를 자동화하기 위해 작성하는 코드이다.(개발자는 항상 뭐든지 자동화하려고 노력해야 한다!!! 효율적으로 살자!!!)
• 테스트 코드를 작성함으로써 테스트를 반복적으로 수행할 수 있고, 테스트를 수행하는 시간을 줄일 수 있다.
  • 1. 빠른 주기로 내 코드에 대한 피드백을 받을 수 있다.
  • 2. 실시간으로 개발 중에 피드백을 받을 수 있다.
  • 3. 즉, 코드를 작성함에 있어서 더 확신을 갖고 작성할 수 있다.
• 테스트 코드 대상의 규모에 따라 단위 테스트, 통합 테스트, E2E 테스트로 나눌 수 있다.
  • 1. 단위 테스트: 함수, 모듈, 클래스 등의 단위를 테스트하는 것
  • 2. 통합 테스트: 단위 테스트를 통합하는 것
  • 3. E2E 테스트: 사용자의 관점에서 테스트하는 것

사실상 프론트엔드 진영에서는 단위 테스트를 훨씬 많이 적용하고, 비교적 비용이 큰 E2E 테스트는 그 빈도가 더 적다고 한다.

Jest(Javascript Test) 라이브러리

• JavaScript 진영에서 사용되는 테스트 라이브러리 중 가장 대표적인 라이브러리.(이외에도 Mocha, Chai, Jasmine 등이 있다.)
• *.test.* 형태의 파일을 모두 테스트 코드로 인지한다.
• 아래와 같은 형태를 띈다.

test('테스트 설명', () => {
  // 테스트를 위한 셋업(변수 선언, 함수 선언 등)
  expect('테스트 대상').toBe('기대 결과');
});

• 이 때, toBe()와 같은 함수를 matcher라고 한다.

React Testing Library(RTL)

• React 컴포넌트를 테스트하기 위한 라이브러리.
• RTL은 코드의 구체적인 과정이 아니라 결과 즉, 화면에 무엇이 렌더링되는지에 초점을 맞춘다.
  • 참고) Enzyme은 코드의 구체적인 과정에 초점을 맞춘다.
  • 예시) 어떤 state를 useState로 관리하다가 Recoil로 관리하게 되었을 때, Enzyme은 코드의 구체적인 과정을 테스트하기 때문에 테스트 코드를 수정해야 한다. 반면에 RTL은 화면에 무엇이 렌더링되는지에 초점을 맞추기 때문에 테스트 코드를 수정할 필요가 없다.
• 아래와 같은 형태를 띈다.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import App from './App';

test('App rendering', () => {
  render(<App />);

  const header = screen.getByText('Hello World');
  const button = screen.getByText('Click me!');

  userEvent.click(button);
  // import '@testing-library/jest-dom'를 통해서 dom과 관련된 matcher 함수들을 사용할 수 있게 된다.
  expect(header).toBeInTheDocument();
  expect(button).toBeDisabled();
});

TDD(Test Driven Development)

• 테스트 주도 개발로, 테스트 코드를 먼저 작성하고 그에 맞춰서 코드를 작성하는 방식이다.
• 3가지 단계를 거쳐서 진행된다.
  • 1. Red: 무조건 실패하는 테스트 코드 작성(당연히 함수가 없는데 테스트 코드만 있으니까!)
  • 2. Green: 무식하게라도 테스트를 통과하는 코드 작성
  • 3. Blue: Green 단계의 코드를 더 좋은 형태로 리팩토링

📝 회고

오늘은 하루종일 Recharts의 공식문서를 보면서 차트에 있어서의 여러 기능과 props들을 살펴보고 적용했다. 요구사항에 해당하는 기능은 모두 구현이 끝나서, 오늘 세션 때 들은 테스트 코드를 열심히 적용했는데, 이놈의 styled-components때문에 약간의 에러들이 있었다. 그래도 결국엔 ThemeProvider를 감싸주고 테스트를 진행하니 괜찮았다. 내일은 나아가서 styled-components의 style을 테스트하는 방법과 시간이 된다면 cypress를 통해서 E2E 테스트를 진행해보려 한다.

참고