VTU 첫 테스트 및 에러 해결(버전 문제)

공식문서

Getting Started | Vue Test Utils for Vue 3 (2.0.0-rc.18) (vuejs.org)

Getting Started | Vue Test Utils for Vue 3 (2.0.0-rc.18)

 

테스트 코드 작성

example.test.js

import { mount } from '@vue/test-utils'
import Example from './Example.vue'

test('메시지를 변경합니다.', () => {
  const wrapper = mount(Example)
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello Vue test utils!');
  wrapper.vm.msg = 'Hello happy'
  expect(wrapper.vm.msg).toBe('Hello Happy!')
  expect(wrapper.find('div').text()).toBe('Hello Happy')
})

Example.vue

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue test utils!'
    }
  },
  mounted() {
    console.log(this.msg)
  }
}
</script>

에러 발생

메시지: TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined.

 

구글링 검색

https://stackoverflow.com/questions/68065635/vue-test-utils-typeerror-cannot-destructure-property-config-of-undefined-or

vue test utils TypeError: Cannot destructure property `config` of 'undefined' or 'null'

 

버전에 맞는 패키지 설치 

npm i vue3-jest -D

jest.config.js 파일 수정

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

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

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

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

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

}

정상 동작 확인

 

정상확인

test 코드 작성

import { mount } from '@vue/test-utils'
import Example from './Example.vue'

test('메시지를 변경합니다.', () => {
  const wrapper = mount(Example)
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello Vue test utils!');
  wrapper.vm.msg = 'Hello Happy!'
  expect(wrapper.vm.msg).toBe('Hello Happy!')
  expect(wrapper.find('div').text()).toBe('Hello Vue test utils!')
})

 

데이터 변경 테스트 예제

import { mount } from '@vue/test-utils'
import Example from './Example.vue'

test('메시지를 변경합니다.', async () => {
  const wrapper = mount(Example)
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello Vue test utils!');
  //wrapper.vm.msg = 'Hello Happy!'
  // 데이터 변경
  await wrapper.setData({
    msg: 'Hello Happy!'
  })
  expect(wrapper.vm.msg).toBe('Hello Happy!')
  expect(wrapper.find('div').text()).toBe('Hello Happy!')
})