프로그래머스 vs code jest 사용법

vs code 기본 세팅은 다음 글을 꼭 확인 하고와야 한다.

2020/09/26 - [잡동사니] - 프로그래머스 vs code 체험

프로그래머스 vs code에서는 상기와 같이 jest test가 설정 되어있다. 이를 최대한 사용해서 test 코드를 짜보고자 한다.

  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],

기본적인 testMatch는 모든 위치에서 spec이나 test 파일명을 사용하거나 __tests__ 디렉토리를 사용해서 테스트 하게 된다.

일단 __tests__를 사용해 보겠다.

아래와 같이 __tests__ 폴더를 만들고 test.js파일을 만든다.

test("true only", () => {
    expect(true).toBe(true);
})

test("false only", () => {
    expect(true).toBe(false);
})

상기와 같은 코드를 작성후 터미널에서

> npm test

를 실행 하면 다음과 같이 나오면 정상적으로 실행 되는 것이다.

1개 실패, 1개 성공이다.

그럼 Sample 프로젝트를 Test Case로 만들어 보겠다.

Sample 파일을 다음과 같이 만든다.

export default class Sample {

    $target = null

    constructor($target) {
        this.$target = $target

        const $h1 = document.createElement('h1')
        $h1.innerText = '샘플 프로젝트'

        $target.appendChild($h1)
    }

    getInnerTest(){
        const $h1 = this.$target.querySelector('h1');
        return $h1.innerText; 
    }
}

그리고 test.js를 다음과 같이 만든다.

import Sample from "../src/Sample";


test("Sample", () => {
    let test = new a(document.createElement('div'));
    
    expect(test.getInnerTest()).toEqual('샘플 프로젝트');
});

Dom상에 '샘플 프로젝트' 라는 글자가 잘 들어갔는지 확인 하는 코드이다.

터미털을 열고 

> npm test

를 실행 하면 다음과 같은 오류가 나타난다.

"Add @babel/plugin-proposal-class-properties .... "

babel.config.js를 다음과 같이 수정해 준다.

module.exports = {
    'presets': ['@babel/preset-env'],
     'plugins' : [
      "@babel/plugin-proposal-class-properties"
      ]
  }
  

그리고 추가적인 npm 모듈을 install  해줘야 한다.

package.json에 다음 라인을 추가한다.

"@babel/plugin-proposal-class-properties": "^7.8.3"

{
  "name": "2020-woowa-tech-camp",
  "private": true,
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "jest --config=jest.config.js",
    "start": "http-server . -c-1"
  },
  "keywords": [
    "programmers"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.11.5",
    "babel-jest": "^25.5.1",
    "http-server": "^0.12.3",
    "jest": "^24.9.0"
  }
}

 

이후

> npm update

를 통해서 관련 모듈을 업데이트 한다.

이후 다시 

>npm test 

시 다음과 같은 오류를 확인 할 수 있다.

Jest의 테스트 모드가 'node'로 되어있기 때문이다. 이를 jsdom으로 수정해 준다.

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: [
    "**/utils/*.js"
  ],
  transform: {
    '^.+\\.js$': 'babel-jest'
  },
  testEnvironment: "jsdom",
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
};

이후 다시 

> npm test

를 실행하면 하기와 같이 정상 테스트 되는 것을 확인 가능하다.