Typescript 환경에서 Jest 사용하기!

2022. 10. 20. 18:54기초 Java Script

jest를 사용해보자!

 

Typescript + express 환경에서 jest를 사용하려고 하다보니 실수를 연발해서 여기에 정리합니다. 🤦‍♂️

 

1. jest 설치하기 

yarn add jest @types/jest

jest를 설치 해주셨다면 이제 test.js or spec.js로 테스트 코드를 작성 하실 수 있습니다! package.json에 가셔서 "jest" 명령어 스크립트를 추가해주신 다음에 터미널에서 실행시키면 해당 레파지토리가 가지고 있는 테스트 파일을 읽어서 한 번에 테스트를 진행해줍니다. 

  "scripts": {
    "start": "node dist/app.js",
    "build": "tsc -p .",
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/app.ts",
    "test": "jest"  // 이렇게 jest 명령어를 추가해주세요!!
  },

//사용하실 때는 "yarn run test"


저는 지금 API테스트를 위해서 jest를 사용하기 때문에 user path에 signin api에 대해서 테스트를 진행 해보겠습니다.🙃

 

2. Test 작성하기

/src/routes/path/user

user.controller 에 signin 로직을 처리하는 함수가 있고, user.query에 로그인을 위한 데이터쿼리가 있는 구조입니다. 여기서 signin에 대한 테스트를 진행하기 위해서 user.test.js와 useCase로 사용할 user.test.json 파일을 만들었습니다.

const testJSON = require("./user.test.json")
import { signin } from "./user.controller";

describe('signin', () => {
    test("user_id is string", () => {
        expect(typeof testJSON.singin_test_1.user_id).toBe('string');
    });
    
    test("password exists", () => {
        expect(!testJSON.singin_test_1.password).toBe(false)
    });
    
    test("sigin test", () => {
        const result = signin(testJSON.singin_test_2);
        expect(result.user_id).toBe(testJSON.singin_test_1.user_id)
        expect(!result.uid).toBe(false)
    });
});

//user.test.json 은 아래와 같습니다.
{
    "singin_test_1": {
        "user_id": "01012345678",
        "password": "abc123"
    },
    "singin_test_2": {
        "user_id": "01046237733",
        "password": "lolbook123"
    }
}

아주 간단한 테스트를 작성했는데, 만약 위 테스트 파일 대로 만든다면 문제가 하나 있을겁니다! 바로 user.controller.ts에서 signin 함수를 import 하는데 계속해서 에러가 발생할 것 입니다. 그렇기 때문에 jest.config와 babel.config를 작성해서 test.js 파일에서 모듈을 불러올 수 있도록 해야합니다. 킹 받게 만들려는건 아니고 처음 yarn package를 설치할 때 필요한 package를 다 설치하면 이러한 문제를 알 수 없기 때문에 지금 단계에서 알려드리는 겁니다.🤭

yarn add babel-jest @babel/core @babel/plugin-transform-modules-commonjs @babel/plugin-transform-runtime @babel/preset-env @bable/preset-typescript

 

 

계속 업데이트 중이니 기다려주세요!!