Section 6 : React TDD 기본

• Test Driven Development (TDD)

  • 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성
  • 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할수 있는 실제 코드를 작성
  • 진행 방법
    1. 원하고자 하는 기능의 테스트 코드 작성
    2. 테스트 실행 Fail
    3. 테스트 코드에 맞는 실제 코드 작성
    4. 테스트 실행 Pass

• TDD의 장점

  • 많은 기능을 테스트하기에 소스 코드에 안정감 부여
  • 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분인데 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듦
  • 소스 코드 하나하나를 더욱 신중하게 짜므로 깨끄한 코드가 나옴

• React Testing Library (RTL)

  • Create React App을 통해 생성된 프로젝트는 지원됨
  • React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library위에 구축됨
  • DOM Testing Library : Dom 노드를 테스트하기 위한 매우 가벼운 솔루션
  • Enzyme을 대처하는 솔루션
    • Enzyme : 구현 주도테스트
    • RTL : 행위 주도 테스트

• Jest

  • FaceBook에 의해서 만들어진 테스팅 프레임 워크
  • 최소한의 설정으로 동작하며 Test case를 만들어서 어플리케이션 코드가 잘돌아가는지 확인
  • 단위 테스트를 위해서 이용 (Unit Test)
  • 위치 확인 방법
    • {filename}.test.js
    • {filename}.spec.js
    • 테스트 폴더에 있는 파일들

• Jest 파일 구조

  • describe에 여러개의 testcase가 들어있음
  • expect와 matcher(toBe)를 통해 Pass인지 Fail인지 확인
  • Test를 진행하는 명령어 : npm test

• render 함수

  • DOM에 컴포넌트를 렌더링하는 함수
  • 인자로 렌더링할 React 컴포넌트가 들어감
  • Return은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴 → 소스코드가 복잡하면 비추천
  • screen 객체를 사용하기 : 사용해야 할 쿼리가 많아질수록 코드가 복잡해질 수 있음

• 쿼리 함수

  • 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법
  • 여러 유형의 쿼리 (get, find, query) 존재
    • getBy : 쿼리에 대해 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 오류 발생
    • queryBy : 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환
    • findBy = getBy + waitFor(일정기간동안 기다려야할때 기대가 통과할때까지 기다릴수 있음) : 쿼리와 일치하는 요소가 발견되면 Promise 반환, 요소가 발견되지 않거나 기본 제한 시간인 1000ms후에 둘 이상의 요소가 발견되면 약속이 거부

• matcher를 알맞게 쓰는지 확인하거나 문법을 올바르게 쓰는지 도와주는 모듈 : ESLint, Prettier

  • ESLint : 개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤수있게 도와주는 라이브러리, 자바스크립트를 쓰는 가이드라인 제시, 문법에 오류가 나면 알려주는 역할
  • Prettier : 주로 코드 형식을 맞추는데 사용, 에러찾는 것이 아닌 코드 포맷터 역할

• ESLint Testing Plugins

  • Plugins : eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용가능
    • plugins 항목 : 플러그인 추가하고, 추가시에 eslint-plugin 부분생략 가능
    • extends 항목 : 플러그인을 추가 한 후에 사용하고자 하는 규칙을 정해줘야 사용 가능

Section 7 : React TDD 를 이용한 간단한 앱 생성 및 배포

• Counter Test코드

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

test("the counter starts at 0", () => {
  render(<App />);
  //screen object를 이용해서 원하는 엘레멘트에 접근(접근할 때  ID로)
  const counterElement = screen.getByTestId("counter");
  // id가 counter인 엘레멘트의 텍스트가 0인지 테스트
  expect(counterElement).toHaveTextContent(0);
});

test("minus button has correct text", () => {
  render(<App />);
  const minusButtonElement = screen.getByTestId("minus-button");
  expect(minusButtonElement).toHaveTextContent("-");
});

test("plus button has correct text", () => {
  render(<App />);
  const plusButtonElement = screen.getByTestId("plus-button");
  expect(plusButtonElement).toHaveTextContent("+");
});

// fireEvent를 이용해서 클릭관리
test("When the + button is pressed, the counter changes to 1", () => {
  render(<App />);
  const buttonElement = screen.getByTestId("plus-button");
  fireEvent.click(buttonElement);
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(1);
});

test("When the - button is pressed, the counter changes to -1", () => {
  render(<App />);
  const buttonElement = screen.getByTestId("minus-button");
  fireEvent.click(buttonElement);
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(-1);
});

// style은 toHaveStyle로 Test
test("on/off button has blue color", () => {
  render(<App />);
  const buttonElement = screen.getByTestId("on/off-button");
  expect(buttonElement).toHaveStyle({ backgroundColor: "blue" });
});

test("Prevent the -,+ button from being pressed when the on/off button is cliecked", () => {
  render(<App />);
  const onOffButtonElement = screen.getByTestId("on/off-button");
  fireEvent.click(onOffButtonElement);
  const plusButtonElement = screen.getByTestId("plus-button");
  expect(plusButtonElement).toBeDisabled();
});

• Github Action을 이용한 AWS S3로 앱 자동 배포

  • 저장소 생성 → 저장소 연결 → workflow 생성

• 앱배포를 위한 AWS S3 버킷 생성하기

  • S3 서비스 -> 버킷 만들기 -> 생성한 버킷을 웹사이트 호스팅을 위해서 사용할 수 있게 설정(활성화) -> 속성 탭 -> 정적 웹 사이트 호스팅 -> 정적 웹사이트 호스팅을 활성화, 호스팅 유형을 정적 웹 사이트 호스팅, 인덱스 문서를 index.html로 설정

• AWS S3 버킷 설정 및 애플리케이션 배포하기

  • 버킷 정책 변경 (권환페이지에서)
    • 퍼블릭 엑세스 차단 설정 편집(웹에서 엑세스 할 수 있게 차단 비활성화)
    • 버킷 정책 작성 : 버킷이름을 맞게 수정

• S3로 앱 자동 배포를 위한 yml 파일 완성하기

  • IAM(Identity and Access Management) 사용자 : 루트 사용자가 부여한 권한만 가지고 있음
  • IAM 사용자 추가하기