함께 자라기 with 그랩 - 3주차

Apeachicetea·2022년 6월 2일
0
post-thumbnail

📌배운 내용 정리

테스트 기본 이해하기

개념

테스트는 이름 그대로, 소프트웨어를 테스트하는 작업입니다. 소프트웨어에 숨겨진 버그는 없는지, 여러 명이 동시에 이용할 때에도 잘 견디는지 등의 문제들을 꼼꼼히 점검하는 일입니다. 테스트를 거치지 않은 소프트웨어는 일반적으로 신뢰하기 어렵습니다. 그 이유는 언제 어디서 버그가 나올지 모르기 때문입니다.

테스트의 종류

개발자가 가장 많이 마주하게 되는 테스트는 크게 세 가지로 아래와 같습니다.

  • 유닛 테스트
    • 유닛(Unit)이라는 말 그대로, 가장 작은 단위의 테스트입니다.
    • 단일 기능을 가지는 함수, 클래스의 메서드가 잘 작동하는지 확인합니다.
    • 테스트하고자 하는 코드는 다른 외부 컴포넌트(웹 서버, DB 등)에 의존성이 없어야 합니다.
    • 가장 간단하고, 직관적이며, 빠르게 실행과 결과를 볼 수 있는 테스트입니다.
  • 통합 테스트
    • 통합(Integration)이라는 말 그대로, 여러 요소를 통합한 테스트를 말합니다.
    • 데이터베이스와 연동한 코드가 잘 작동하는지, 여러 함수와 클래스가 엮인 로직이 잘 작동하는지 등을 확인합니다.
    • 유닛 테스트보다는 복잡하고 느리지만, 소프트웨어는 결국 여러 코드 로직의 통합이라는 점에서 통합 테스트 역시 중요합니다.
  • E2E 테스트
    • E2E는 End To End의 약자로, 끝에서 끝, 즉 클라이언트 입장에서 테스트해보는 것입니다.
    • 예를 들어 쇼핑몰 웹사이트의 경우, /login 으로 POST 요청 시 로그인은 잘 되는지, /order 로 POST 요청 시 주문 결과는 잘 나오는지 등을 확인합니다.
    • 보통 유저 시나리오에 따라 테스트합니다.
    • 테스트 중 가장 느리지만, 결국 소프트웨어를 사용하는건 유저이고, 유저 입장에서 해보는 테스트이므로, 역시 중요하다고 할 수 있습니다.

보통 테스트는 유닛 -> 통합 -> E2E 순으로 작성하게 됩니다(꼭 정답이 있는 건 아닙니다) 작은 단위부터 테스트를 작성하면서 점점 통합적인 테스트를 진행하게 됩니다.

테스트 개수는 가장 작은 단위 테스트인 유닛 테스트가 가장 많고, E2E 테스트가 가장 적게 됩니다.

유닛 테스트로 추후에 어떠한 컴포넌트의 기능이 문제가 있는지 빠르게 찾아낼 수 있습니다. 한편 통합테스트로 프로그램의 로직 흐름에 이상이 없는지를 파악할 수 있습니다. E2E 테스트는 최종적으로 사용자 관점에서 사용하기에 기능적인 문제가 없는지 진행하는 테스트로 정리할 수 있습니다.

테스트 코드가 필요한 이유

테스트 코드는 프로젝트의 코드를 테스트하기 위해 필요합니다. 하지만 테스트 코드는 단순히 테스트 실행 말고도 다음처럼 더 큰 의미들이 있습니다.

  • 테스트 코드는 코드가 동작하기 위해 필요한 것들과 입/출력을 드러냅니다.
    • 따라서 테스트 코드는 프로젝트 코드에 대한 가장 정확한 문서가 됩니다. 테스트 코드만 보면, 코드를 돌리는데 필요한 것들을 알 수 있기 때문입니다.
  • 테스트 코드는 리팩토링과 지속적인 개발을 위해 필수적입니다.
    • 테스트 코드 없이 개발을 계속해서 해나가면, 추가로 개발한 코드가 기존 코드의 어떤 사이드 이펙트를 불러일으키는지 확인하기 어렵습니다.
    • 테스트 코드를 만들어두면, 추가로 코드를 개발할 때마다, 기존 테스트 코드를 모두 실행함으로써 기존 코드의 작동 여부에 사이드 이펙트가 있는 지 빠르게 확인할 수 있습니다.
    • 이런 맥락에서, 테스트 코드는 일종의 안전망입니다. 테스트 코드 없이 개발을 계속해나가면 매번 리팩토링과 기능 개발을 할 때마다 마음을 졸이게 됩니다.

📌 React 환경에서 테스트 코드 연습해보기

Jest 공식홈페이지에 나와 있는 기본 예제를 연습해보았다.

//package.json
"scripts": {
    "test": "jest",
  },
  
//src/setupTests.js
import "@testing-library/react";
import "@testing-library/jest-dom";

//sum.js
const sum = (arr) => {
  return arr.reduce((acc, cur) => {
    acc += cur;
    return acc;
  }, 0);
};

module.exports = sum;

//sum.test.js
const sum = require("./sum");

const numArr = [1, 2, 3];

describe("Jest 연습 중", () => {
  it("덧셈 연습 중", () => {
    expect(sum(numArr)).toEqual(6);
  });
});

위와 같이 작성 후 npm run test를 하게 되면 Jest가 파일명이 xxx.test.js이거나__tests__ 폴더에 생성한 test 파일들을 일괄적으로 테스트한다.

Jest는 CommonJS 모듈 시스템을 사용하기 때문에, import / export를 사용하려면, 다음과 같이 설정해야 한다.

//npm i -D @babel/preset-env

//babel.config.js
module.exports = {
  presets: ['@babel/preset-env'],
};

typescript 환경에서도 적용하게 하려면 다음과 같이 설정해야 한다.

//npm i -D @babel/preset-env

//babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript'],
};

react-testing-library를 이용한 컴포넌트 테스트

//Profile.js
import React from "react";

const Profile = ({ username, name }) => {
  return (
    <div>
      <b>{username}</b>&nbsp;
      <span>({name})</span>
    </div>
  );
};

export default Profile;

//Profile.test.js
import React from "react";
import { render } from "@testing-library/react";
import Profile from "./Profile";

describe("<Profile />", () => {
  it("matches snapshot", () => {
    const utils = render(<Profile username="어피치" name="아이스티" />);
    expect(utils.container).toMatchSnapshot();
  });
});

//jest.config.js
module.exports = {
  testEnvironment: "jsdom",
};

//npm install --save-dev jest-environment-jsdom

위와 같이 작성하면 아래와 같은 결과를 확인할 수 있다.

📌 내 프로젝트에 적용해보기

OAuth 인증시 인증코드를 받게되고, 그 코드를 통해 토큰을 받아 유저를 구별할 수 있게 된다. 테스트 코드를 만들어 인증코드와 토큰이 재대로 들어오는지 마지막으로 받은 토큰으로 유저정보를 재대로 받아 오는지를 확인해보고 싶다.

//Naver.tsx
function Naver() {
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();

  const getNaverToken = async () => {
    const naverCode = new URL(window.location.href).searchParams.get('code');
    const naverState = new URL(window.location.href).searchParams.get('state');

    const response = await axios.get(
      `${process.env.REACT_APP_SERVER}/users/auth/naver?code=${naverCode}&state=${naverState}`,
      {
        headers: {
          'Content-Type': 'application/json',
        },
        withCredentials: true,
      },
    );
    const { token, oauthId } = response.data.data;
    const data = await axios.post(
      `${process.env.REACT_APP_SERVER}/users/oauth`,
      { oauthId },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
        },
        withCredentials: true,
      },
    );
    dispatch(UserLogin(data.data.data));
    navigate('/');
  };

출처
그랩님이 공유해주신 자료
https://www.daleseo.com/jest-basic/
https://jestjs.io/docs/getting-started
https://blog.pumpkin-raccoon.com/81
https://jestjs.io/docs/upgrading-to-jest28#jsdom

profile
웹 프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2024년 1월 20일

The bonus and promotions review of BC Game on https://anycoincasinos.com/bc-game/ was quite informative. Bonuses and promotions are a significant part of the online casino experience. This review breaks down the different types of bonuses available at BC Game, how to access them, and the terms associated with them. Knowing this beforehand helps in making informed decisions about where to play.

답글 달기
comment-user-thumbnail
2024년 2월 12일

I often like to play different games. I found a very profitable online gambling game https://odds96.in/en/casino . Platform is relatively new, so you can really make money here. There are a lot of slots, a wide range of games, various modes, free freespins and generous bonuses waiting for you. All of this you can try out at an Indian online casino.

답글 달기