[JavaScript] 테스트코드

최예닮·2022년 12월 12일
0
post-thumbnail

오늘은 테스트코드 에 대해 이야기해보도록 합시다!

우선 나는 Jest 사용하여 테스트 하였다.

왜 Jest 를 사용했니 ? Why ??

1. Jest 란?

Jest 란 코드가 제대로 동작하는지 확인하는 Test Case 를 만드는 페이스북 이 개발한 'JS 테스팅 프레임워크' 이다.

Jest 를 사용했어 ?

Mocha 라는 라이브러리는 Jest 보다 사용할 수 있는 기능이 많지만 Jest 는 문서화도 잘되어 있고 별도의 설치 없이 간단하고 가볍게 사용할 수 있어 사용하게 되었다.

자, 그럼 이제 설치부터 시작해서 어떻게 테스트를 진행했는지 보여주갔어

(라고써) ㅁ...명 받들겠습니다!!!
npm i -D jest

그 다음 package.json 으로 가서 scripts 에 test를 jest로 변경해주면 된다.

"scripts": {
  "test": "jest"
}

이렇게 해주면 우리는 터미널에 npm test 를 입력하여 jest 를 실행할 수 있다 🎊 예스 !!

우선 나는 기능 단위의 통합테스트를 할거기 때문에 supertest 를 사용하였다.

2. 테스트코드 작성

const request = require("supertest");
const server = require("../../app");

require("dotenv").config();

이렇게 선언해주고 전역으로 내가 테스트해볼 기능의 바디값을 선언해주면 된다.

const mockMember = {
  memberEmail: "dpekfa144@naver.com",
  password: "min871612!",
};

const memberTest = {
  customMemberId: "dpekfa144@naver.com",
};

const customQuestions = {
  category: "costom",
  question: "커스텀 테스트 입니다.",
};

자, 이렇게 선언해 주었으면 이제 테스트해볼 기능을 만들어봐야 하지 않겠는가?
현재 나는 모의면접을 볼 수 있는 사이트를 구현했기에 면접에 나올 질문을 생성할 수 있는 테스트를 진행해보겠다.

describe("mockInterview 테스트", () => {
  it("Post /mockInterview/custom", async () => {
    const accessToken = jwt.sign(mockMember);
    const refreshToken = jwt.refreshSign(mockMember);
    const response = await request(server)
      .post("/mockInterview/custom")
      .set("Authorization", `Bearer ${accessToken}`)
      .set("refresh", `Bearer ${refreshToken}`)
      .send(customQuestions);
    expect(response.statusCode).toBe(201);
  });
});

자, 이렇게 만들면 됩니다. 참 쉽죠?

자, 이렇게 테스트 Run 을 돌리게 되면 우찌되는지 한번 봐보자

후후... 짜라란 이렇게 성공하게 됩니다 >< 짜릿하다 짜릿해

이제 쭉 짜보면 된다. 근데 짜보다보니까 params 값을 어떻게 받아야할지 도통 몰라서 삽질을 좀 했다. 처음에는 어떻게 했냐면

  it("Delete /mockInterview/custom", async () => {
    const accessToken = jwt.sign(member);
    const data = await MockInterviews.findOne(memberTest);
    const response = await request(server)
      .delete("/mockInterview/custom/:paramsId")
      .set("Authorization", `Bearer ${accessToken}`);
    expect(response.statusCode).toBe(200);
  });

이렇게 했는데 테스트를 돌리면

자꾸만 400으로 뱉는거다. 나는 200을 원했다고 친구야...😭😭

하지만 결국 찾아냈다.
한참을 삽질하고 해매다가...

.delete(`/mockInterview/custom/${data.id}`)

ㅋㅋㅋㅋ 무슨 차이인지 보이시나염?

"" 빼고 백틱을 넣고 params 값에 실제로 받은 데이터의 경로를 넣어주면 됩니다... 후후후.... 자 이렇게 하고 테스트를 돌리면 ?!!

짜자잔 ! 정상적으로 성공하게 됩니다.

그렇다면 마지막으로 내가 짠 코드들로 통합 테스트를 해보자 !

이렇게 되면 정상적으로 내가 원하는 방향대로 테스트가 되었다 말할 수 있습니다 ^_^ 후 ... 재미있었다...

profile
산을 오르려고 하는데 이제 주차장에 막 주차한 초보개발자

0개의 댓글