Unit 테스트

Unit Test

단위(Unit) 테스트란 데이터(상태), 함수(메소드), 컴포넌트 등의 정의된 프로그램을

최소 단위들이 독립적으로 정상 동작하는지 확인하는 방법.

Jest 프레임도 있고, Vue Test Utils 라이브러리도 있습니다.

 

테스트 환경 구성

npm i -D jest @vue/test-utils@next vue-jest@next babel-jest

위 명령어를 통해 unit test관련 프레임과 라이브러리를 설치합니다.

module.exports = {
  // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다.
  // 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다.
  // E.g. `import HelloWorld from '~/components/HelloWorld';`
  moduleFileExtensions: [
    'js',
    'vue'
  ],

  // `~` 같은 경로 별칭을 매핑합니다.
  // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
  // E.g. `import HelloWorld from '~/components/HelloWorld';`
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  // 일치하는 경로에서는 모듈을 가져오지 않습니다.
  // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],

  // jsdom 환경에 대한 URL을 설정합니다.
  // https://github.com/facebook/jest/issues/6766
  testURL: 'http://localhost',

  // 정규식과 일치하는 파일의 변환 모듈을 지정합니다.
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  }
}

루트 경로에 jest.config.js 파일을 만들어서 위와 같이 작성합니다.

package.json 파일 scripts부분에도 사용할 수 있도록 추가합니다.

.eslintrc.js 파일 env부분에도 사용할 수 있도록 추가합니다.

테스트를 실행해보겠습니다.

오른쪽은 함수를 만들었습니다.

왼쪽은 test('string', () => { })의 방식으로 test를 해봅니다.

expect()는 받은 값, 즉, test할 시 함수에 넣어려는 값을 의미합니다.

toBe()는 희망 값, 즉, test할 때 이런 값을 나왔으면 한다는 뜻을 의미합니다.

 

npm run test:unit

위 명령을 통해 test를 실행합니다.

 

실패하면 fail를 뜨고, 성공하면 pass가 뜹니다. 어디서 실패했는지도 알려줍니다.

 

Jest Globals

Jest 참조 문서

 

① test()

이름과 callback함수, 보통 이 두개의 인수 필요합니다.

callback 함수 내부에서 실제 테스트 진행하면 됩니다.

가끔 test 시간이 늘릴 필요 있으면 마지막 인수인 시간을 늘릴 수 있습니다.

 

② describe()

그룹으로 test()를 래핑할 수 있습니다.

 

③ beforeAll, afterAll

모든 테스트 시작하기 전, 혹은 끝난 후 단 한 번만 실행되는 함수입니다.

 

④ beforeEach, afterEach

해당 그룹 안에 각각의 테스트가 시작 전에, 혹은 끝난 후에 실행된 함수입니다.

 

.toBe(value), .toEqual(value)

toBe는 문자열, 숫자,boolean, null등 원시형 데이터를 비교해줍니다.

toEqual는 객체, 배열등 참조형 데이터를 비교해줍니다.

 

.not

같이 않다는 뜻입니다.

 

비동기 테스트

가장 위에처럼 비동기 함수를 만들었습니다.

 

비동기 함수를 테스트할 때는 기다리고 모든 함수를 다 완성한다는

의미인 done를 붙여주면서 done()메소드까지 붙여줘야 합니다.

 

혹은 then으로 비동기 함수인 것을 test에게 명시해주면 됩니다.

 

resolves란 브리지를 사용해서 복잡한 done, then을 간략화할 수 있습니다.

 

test 안에 있는 함수를 비동기 함수로 만들어버리는 방법도 있습니다.

 

test메소드 중 3번째 인수 있습니다. 기본적으로 5s 실행됩니다.

만약 비동기 함수가 5s 이상 걸리면 마지막 변수를 늘리면 됩니다.

test('시간 늘리기', async() => { } , 7000) })

 

모의(Mock)함수

오른쪽은 영화제목 변환하는 함수고, 왼쪽은 그것을 테스트하고 있습니다.

하지만 여기서 문제가 있습니다.

오른쪽 같은 경우, api를 통해 값을 가져오는 것을 우리가 imdb에서 내어주는 값입니다.

우리가 직접 만든 코드 아니라서 테스트할 필요가 없습니다.

이때 모의(Mock)함수 개념을 도입해서 임의로 해당부분을 통과해줍니다.

 

임위로 data를 알려줘서 나머지 로직이 잘 되어 있는지를 확인하는 겁니다.

 

Vue Test Utils 테스트

VTU 참조 문서

 

왼쪽은 작업한 vue파일이며 오른쪽은 vtu로 테스트하는 코드입니다.

wrapper.vm은 곧 vue파일의 this와 같은 의미입니다.

wrapper.setData()가 반응형을 유지할 수 있습니다.

 

mount vs shadowMount

mount는 어떤 컴포넌트의 자식 컴포넌트, 혹은 연결된 컴포넌트를 모두 렌더링하고 테스트 결과를 알려줍니다.

shadowMount는 하위 컴포넌트를 연결하는 척만하고 테스트한 컴포넌트만 테스트하고 있는 겁니다.