jest@29 버전 기준으로 작성되었습니다.

단위 테스트 환경이 구성되어있다는 전제로 합니다.
Vue3 + Jest@29 단위 테스트 환경 설정 - https://velog.io/@minu-j/Vue3-Jest29-unit-test

환경 구성

의존성 추가

$ yarn add -D @vue/test-utils @vue/vue3-jest jest-environment-jsdom ts-node

• @vue/test-utils: Vue 컴포넌트, 이벤트 트리거, DOM 조작 등 수행

• @vue/vue3-jest: Vue3 공식 jest 테스트 프리셋

• jest-environment-jsdom: Node.js환경에서 브라우저의 DOM 시뮬레이션하는 jsdom 환경을 jest에서 사용할 수 있도록 함

  • jest@28부터 DOM 시뮬레이션 라이브러리가 기본으로 포함되지 않습니다.

• ts-node: Node.js환경에서 동작하는 TypeScript 런타임, TypeScript 파일을 실행할 수 있도록 함

Jest 설정 파일 수정

jest.config.ts

import type { Config } from 'jest';

const config: Config = {
  ...
  testEnvironment: 'jest-environment-jsdom', // jsdom 환경 구성
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },
  ...
  transform: {
    ...
    '^.+\\.vue$': '@vue/vue3-jest', // .vue 파일의 트랜스파일링 옵션을 '@vue/vue3-jest'로 설정
  },
};

export default config;

테스트 파일 예시

someComponent.test.ts

import { describe, expect, it } from '@jest/globals';
import { someComponent } from '@/.../someComponent.vue';

describe('someComponent 컴포넌트테스트', () => {
  it('컴포넌트테스트의 상세 테스트 항목', () => {
    const wrapper = mount(TestVue, {
      props: {
        ...
      },
    });
    expect(wrapper.text()).toContain('Hello World!');
  });

  ...
});

테스트 실행

yarn test
# or
yarn test --watch

참고 자료

Vue 공식문서 컴포넌트 테스트 - https://ko.vuejs.org/guide/scaling-up/testing#component-testing

Vue test utils 공식문서 - https://test-utils.vuejs.org/

vue-jest 공식문서 - https://github.com/vuejs/vue-jest

jest 공식문서 - https://jestjs.io/docs/configuration