Vue.js+Vitest에서 테스트를 수행할 수 있는 환경 만들기

개시하다
평상시 업무는 주로 Vue입니다.js와 Rails@_kt15_라고 쓰여 있습니다.최근에 Vitest가 폭발하는 것 같다는 소식을 들었어요.당장 해보고 싶지만 어렵게 필자가 자주 쓰는 뷰.js와 조합해서 사용하고 싶기 때문에 환경 구축부터 시작합니다.이 글에서 Vue.js+Vitest에서 테스트를 실행할 수 있는 환경을 만드는 것을 목표로 합니다.
Vitest란 무엇입니까?
2021/12/26의 경우 Vitest가 아직 안정된 버전이 나오지 않았기 때문에 정식으로 사용하는 것을 추천하지 않습니다.
Vitest는 Vite 기반 유닛 테스트 프레임워크입니다.
폭발 속도가 특징인 곳이죠.속도에 관해서여기 기사.가 닿았고 Jest와 비교해도 이해하기 쉽다.
Given Jest's massive adoption, Vitest provides a compatible API that allows you to use it as a drop-in replacement in most projects.
또한 공식 문서에는 Jest와 호환되는 기술도 있습니다.
구축된 환경

Vue.js v3.2.26

Node.js v16.13.0

npm v8.1.0

Vite v2.7.6

Vitest v0.0.113

Vite v2는 Vitest를 사용할 때 사용됩니다.버전 7 이상, Nodev14 이상이 필요합니다.
환경 구축!
Vite 경유.js 프로젝트 만들기
먼저 Vite+Vue Vite 공식 문서를 참조하십시오.js 프로젝트를 계속 만듭니다.특별한 이유는 없지만 이 글에는 npm를 사용합니다.npm init vite@latest 실행 후 다음과 같은 몇 가지 질문을 받을 수 있습니다.입력하면 프로젝트를 제작할 수 있습니다. 잠시만 기다리세요.(필자의 환경에 vite v2.7.6이 설치되어 있음)

$ npm init vite@latest

✔ Project name: … sample-vitest
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in ...

Done. Now run:

  cd sample-vitest
  npm install
  npm run dev

프로젝트가 완료되면 작업을 확인합니다.
다음 명령을 실행하여 http://localhost:3000/하십시오.

cd sample-vitest
npm install
npm run dev

아래 화면이 나오면 아무 문제 없이 프로젝트를 만들 수 있습니다🎉

비디오 설정
Vitest 설치
먼저 Vitest를 설치합니다.필자의 환경에서 v0.0.13의 Vitest가 설치되어 있습니다.

npm install -D vitest

Vitest 설정 파일 만들기

touch vitest.config.ts

테스트에 필요한 설정 추가
생성된 vitest.config.ts에 다음 설정을 추가합니다.
defineConfig에서 UserConfig 유형에 정의된 속성을 지정할 수 있습니다.Vitest 쪽에서 이걸 하고 있다확장 UserConfig 유형, 추가 optional test 속성.그러나 읽기에 성공하지 못해 추가/// <reference types="vitest" />하고 명확하게 읽었다.(여기서 좀 반했어요...)
vitest.config.ts

/// <reference types="vitest" />

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    Vue(),
  ],
  test: {
    global: true,
    environment: 'happy-dom',
  },
})

지정할 수 있는 옵션에 대한 자세한 내용은 다음과 같습니다.
테스트를 수행하기 위해 npm 스크립트 추가
package.json

+ "test": "vitest",

필요한 설정은 이상입니다.
시험 한번 보세요.
어렵게 설정했으니 실제로 테스트해 보자.
테스트에 필요한 라이브러리 설치

npm install @vue/test-utils@next @vitejs/plugin-vue happy-dom --save-dev

스펙 파일 추가
다음 명령을 실행하여 스펙용 파일을 추가합니다.

mkdir src/test
touch src/test/HelloWorld.spec.ts

내용이 거칠지만 다음과 같은 테스트가 추가된다.
HelloWorld.spec.ts

import { mount } from '@vue/test-utils'
import HelloWorld from '../components/HelloWorld.vue'
import { test, expect } from 'vitest'

test('初期表示', () => {
  const wrapper = mount(HelloWorld, {
    props: {
      msg: 'hello',
    },
  })

  expect(wrapper.text()).toContain('hello')
})

테스트를 실시하다
지금 준비가 다 되었으니 곧 시험을 시작합시다.실행npm run test을 통해 테스트를 실행합니다.

$ npm run test

 √ src/test/HelloWorld.spec.ts (1)

Test Files  1 passed (1)
     Tests  1 passed (1)
      Time  851ms (in thread 7ms, 12499.63%)


 PASS  Waiting for file changes...
press any key to exit...

만약 이렇게 표시된다면 테스트가 실행될 것이다🎉
신중을 기하기 위해 시험이 잘 진행되었는지 확인하기 위해 일부러 실패로 수정해 보았다.
src/test/HelloWorld.spec.ts

import { mount } from '@vue/test-utils'
import HelloWorld from '../components/HelloWorld.vue'
import { test, expect } from 'vitest'

test('初期表示', () => {
  const wrapper = mount(HelloWorld, {
    props: {
      msg: 'hello',
    },
  })

- expect(wrapper.text()).toContain('hello')
+ expect(wrapper.text()).toContain('hello2')
})

이전에 수행한 npm run test가 실행 중이면 위의 변경 사항을 저장하면 테스트가 자동으로 다시 실행됩니다.끝날 때 다시 실행하십시오npm run test.

AssertionError: expected 'hello Recommended IDE setup: VSCode + VolarSee README.md for more information. Vite Docs  | Vue 3 Docscount is: 0 Edit components/HelloWorld.vue to test hot module replacement.' to include 'hello2'
 ❯ Proxy.<anonymous> node_modules/vitest/dist/vi-51946984.js:506:17
 ❯ Proxy.methodWrapper node_modules/chai/lib/chai/utils/addMethod.js:57:25
 ❯ src/test/HelloWorld.spec.ts:12:25
     10|   })
     11|
     12|   expect(wrapper.text()).toContain('hello2')
       |                         ^
     13| })

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  1 failed (1)
      Time  7ms


 FAIL  Tests failed. Watching for file changes...

기대했던 대로 시험에 실패해서 시험을 잘 본 것 같아요!
끝맺다
이번에는 베입니다.js+Vitest의 조합을 통해 테스트를 수행할 수 있는 환경을 만들었습니다.아직 Vitest의 폭발 속도 부분을 경험하지 못했기 때문에 천천히 만져보고 싶어요.기분이 좋으면 다음에 관련 기사를 써보고 싶어요.
참고 자료

https://vitest.dev/

https://ja.vitejs.dev

https://zenn.dev/jay_es/articles/2021-12-22-vitest-comparison