vue3 vitest 적용하기

테스트를 위해 vitest 패키지를 사용해보자

npm install vitest jsdom

vitest 의 default environment is a NodeJS environment 이지만 browser-like enviromnet 를 위해 jsdom 을 사용할 수 있다

 

package.json 파일에 script를 추가시켜준다

    "test:unit": "vitest --environment jsdom",

.

 

./test/unit/example.test.js

 

vitest 의 문법은 Jest 와 비슷하다

import { describe, it, expect } from "vitest";

describe('basic math', () => {
  it('adds two numbers', () => {
    expect(1 + 1).toBe(2);
  });
})

1+1은 2를 확인하는 파일을 만들어주고 추가한 스크립트 명령어를 실행시킨다

npm run test:unit

 

 

 

요래 나온다

import { describe, it, expect } from "vitest";

describe("basic math", () => {
  it("adds two numbers", () => {
    expect(1 + 1).toBe(3);
  });
});

toBe를 3으로 변경하면 아래와 같이 친절히 알려준다

 

 

함수 생성 후 테스트 적용

함수를 생성해보겠다

 

/src/example.js

 

짝수 홀수 값을 return 하는 함수를 만들고

export const evenOrOdd = (number) => {
  if (number % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

 

/test/unit/example.test.js

import 후 사용해주면 된다

import { describe, it, expect } from "vitest";
import { evenOrOdd } from "@/example.js";

describe("evenOrAdd", () => {
  it("indicates the number is even", () => {
    expect(evenOrOdd(4)).toBe("Even");
  });
});

expect 값에 import한 함수를 사용하고 다시 동일하게 toBe 값을 적어주면 된다

 

 

 

--coverage flag 

vitest 에서 --coverage는 관리를 쉽게 만들어주는 기능이다

 

 

스크립트에서 --coverage 를 추가해준다

"test:unit": "vitest --environment jsdom --coverage"

 

실행이되면 최상위 폴더에 coverage 폴더가 생긴다

 

coverage 폴더의 index.html 을 들어가면

파일의 목록들을 나열해준다

File 목록을 클릭하면 파일로 들어가고

각 실행된 코드를 확인할 수 있어 놓친 부분을 캐치할 수 있다

위처럼 toBe('Odd') 가 되는 경우의 테스트 코드는 없으니 

테스트의 품질을 높이고 싶으면 추가해주면 된다

 

 

Setup Vitest Globals

테스트 코드 작성 시 파일에서 테스트 메서드를 import 후 사용하는데 이는 굉장히 불편하다

import 없이 사용할 수 있는 방법을 살펴보자

 

 

 

1. vitest 에서 제공하는 describe, it, expect 들을 주석처리한다

// import { describe, it, expect } from "vitest";
import { evenOrOdd, multiply } from "@/example.js";
describe("basic math", () => {
  it("adds two numbers", () => {
    expect(evenOrOdd(1 + 1)).toBe("Even");
  });

  it("adds two numbers", () => {
    expect(evenOrOdd(1 + 2)).toBe("Odd");
  });
});

describe("multiply", () => {
  it("multiplies two numbers together", () => {
    expect(multiply(2, 3)).toBe(6);
  });
});

 

2. vite.config 파일에서 global 속성을 추가한다

 

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  test : { // 여기 여기 !!!
    globals: true
  }
});

그 후 테스트를 돌리면 정상적으로 실행된다

 

메서드를 지우고 위처럼 나오면 eslint 때문이니까이 설정을 해주면된다

npm install --save-dev eslint-plugin-vitest-globals

관련 패키지를 받고나서 

./src/.eslintrc.cjs

 

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
    "plugin:vitest-globals/recommended", // 나야 !! 여기!!
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  env: { // 나도 !!!!
    "vitest-globals/env": true,
  }
};

eslint 파일에 들어가 플러그인을 추가해주고 

env 파일 속성에도 vitest-globals/env 를 true 로 설정해주면 된다