🏰 vue2 jest 환경세팅

🚁 Vue2 jest 환경세팅 하는 이유

이번에 회사 프로젝트에 테스트 코드 도입하기 앞서 환경세팅의 준비 필요성을 느껴서 블로그에 남기고자 한다.

항상 환경세팅이 오래걸리기도 했다. 환경세팅은 여기서 참고하였다.

환경은 아래와 같다.

• Node Version : 16.19.1
• Npm Version : 8.19.3

 

 

⚓️  뷰 테스트 라이브러리 설치

npm install jest  --save-dev
npm install @vue/test-utils@1.3.6 --save-dev
npm install vue-jest --save-dev
npm install babel-jest --save-dev

⚓️  뷰 테스트 라이브러리 설치 (수정본)

npm install @vue/cli-plugin-unit-jest@5.0.0 --save-dev
npm install @vue/test-utils@1.3.6 --save-dev
npm install @vue/vue2-jest@27.0.0 --save-dev

🏯 Babel(2023.08.10) 수정 

바벨은 최신문법을 es5 으로 바꿔주는 역할을 한다. jest 관련하여 babel 설정이 필요하다.

(당시 버전의 호환성이 맞지 않아 install 할때 버전을 명시해주었다.)

npm install babel-core@^7.0.0-bridge.0 --save-dev
npm install babel-jest@27.3.1 --save-dev
npm install @babel/core@7.0.0-bridge.0 --save-dev
npm install @babel/preset-env@7.22.10 --save-dev

vue2에서 babel.config.js에 아래처럼 되어있다면 babel/preset을 세팅할 필요가 없다.

 

module.exports = {
  presets: [
    //"@babel/preset-env", 수동설정 원하는 경우
    '@vue/cli-plugin-babel/preset' //vue cli에서 자동설정됨
  ]
}

 

🎢  vue jest 명령어 사용할 수 있도록 추가

//vue add unit-jest

 

✈️ jest 설치

npm install jest@27.0.3 --save-dev

🚏 jest.config.js

jest를 사용하기위해서는 jest 환경설정이 필요하고 jest.config.js에서 수정이 가능하다.

module.exports = {
    preset: '@vue/cli-plugin-unit-jest',
    moduleFileExtensions: [
        "js",
        "json",
        // 모든 vue 파일(`*.vue`)을 처리하기 위해 Jest에게 알려줍니다
        "vue"
    ],
    transform: {
        ".*\\.(vue)$": "@vue/vue2-jest",
        ".*\\.(js)$": "babel-jest",
    },
    moduleNameMapper: {
        // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
        '^@/(.*)$': '<rootDir>/src/$1'
    },
    testMatch: [
        // __tests__ 경로 하위에 있는 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
        "**/__tests__/**/*.[jt]s?(x)",
        // 파일 이름에 'xxx.spec' 또는 'xxx.test'라는 이름이 붙여인 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
        "**/?(*.)+(spec|test).[jt]s?(x)"
    ],
    testPathIgnorePatterns: ["/node_modules/"],
    collectCoverage: true,
    collectCoverageFrom: [
        "**/*.{js,vue}",
        "!**/node_modules/**",
        "!**/coverage/**",
        "!**vue.config.js**",
        "!**babel.config.js**",
        "!**jest.config.js**",
    ]
}

 

🛩️ 명령어 등록

//package.json
{
 "scripts": {
 	"test:unit": "vue-cli-service test:unit"
 }
}

 

🚥 HelloWorld.vue 작성

/*HelloWorld.vue*/
<template>
    <div class="hello">
        hello
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
}
</script>
<style scoped></style>

//helloworldcomponent.test.js
import { shallowMount } from "@vue/test-utils";
import HelloWorld from '@/components/HelloWorld.vue'
describe('hello world', () => {
    test('test1', async () => {
        const wrapper = shallowMount(HelloWorld);
        expect(wrapper.text()).toBe("hello")
    });
});

아래 명령어를 통해 HelloWorld.vue가 테스트코드를 성공적으로 통과한 것을 알 수 있다.

npm run test:unit