소개

밑의 예시는 MessageComponent라는 컴포넌트를 테스트하는 예시이다.

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

// The component to test
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

// Example.vue

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

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

wrapper 객체

mount 메서드는 wrapper 객체를 반환하게 되고, 이 wrapper 객체가 해당 컴포넌트라고 보면 된다.

이 wrapper 객체의 컴포넌트 속성들에 접근하기 위해서는 .vm이라는 속성을 통해 접근이 가능하다. 즉, wrapper.vm === this 객체라고 보면 편하다.

// example.test.js

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

test('change message', () => {
  const wrapper = mount(Example) // 두번째 인자는 생략 가능, wrapper 객체 반환
  
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello!')
})

그렇다면 테스트 환경에서 해당 컴포넌트의 속성들을 변경시킬 수 있을까? 일단 다음과 같이 일반적인 할당 연산자를 통해서 wrapper.vm.msg의 값을 변경해 보자. 이 변경이 컴포넌트에도 반영이 되어서 아래의 테스트가 통과될까?

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

test('change message', () => {
  const wrapper = mount(Example) // 두번째 인자는 생략 가능, wrapper 객체 반환
  
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello!')
  wrapper.vm.msg = 'Hello dokyung!'
  expect(wrapper.vm.msg).toBe('Hello dokyung!')

  expect(wrapper.find('div').text()).toBe('Hello dokyung?')
})

변경되지도 않았고, 역시 통과되지도 않았다.

이렇게 vm.msg를 테스트 환경에서 바뀐다고 해서 컴포넌트 내에서 해당 데이터가 바뀌지 않는다. 이렇게 단순히 할당하는 것은 데이터의 반응성을 유지시키지 못하기 때문이다.

setData()

비동기라 반응성을 적용시켜서 데이터를 바꿀 수 있다.

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

test('change message', async () => {
  const wrapper = mount(Example) // 두번째 인자는 생략 가능, wrapper 객체 반환
  
  // wrapper.vm === this
  expect(wrapper.vm.msg).toBe('Hello!')
  // wrapper.vm.msg = 'Hello dokyung!'

  await wrapper.setData({
    msg: 'Hello dokyung!'
  })
  expect(wrapper.vm.msg).toBe('Hello dokyung!')

  expect(wrapper.find('div').text()).toBe('Hello dokyung!')
})