Vue 3 앱 테스트 시작하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

앱이 그 어느 때보다 복잡해짐에 따라 앱을 자동으로 테스트하는 것이 중요합니다. 우리는 이것을 단위 테스트로 할 수 있으며 모든 것을 손으로 테스트할 필요가 없습니다.

이 글에서는 간단한 앱을 작성하고 테스트하여 Vue 3 앱을 테스트하는 방법을 살펴보겠습니다.

테스트 시작하기

Vue CLI로 프로젝트를 생성하여 테스트를 시작할 수 있습니다.

then 프로젝트를 생성할 때 '단위 테스트' 옵션을 추가합니다.

그런 다음 단위 테스트를 만들고 실행하기 위한 파일과 설정이 추가됩니다.

테스트 파일이 있는 tests 폴더가 표시되어야 합니다.

이제 다음과 같이 작성하여 자체 테스트를 만들 수 있습니다.

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

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

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

그런 다음 npm run test:unit를 실행하여 테스트를 실행할 수 있습니다.

'Hello World'가 소품으로 렌더링되었으므로 확인 표시가 표시되어야 합니다.
mount를 마운트하기 위해 MessageComponent를 호출합니다.

그리고 props에는 소품이 있습니다.

그런 다음 렌더링된 구성 요소의 텍스트를 가져오기 위해 wrapper.text를 호출합니다.
test 테스트 설명이 있는 문자열을 사용하고 콜백에 테스트 코드가 있습니다.

조건부 렌더링

첫 번째 예에서와 같이 조건부 렌더링을 테스트할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

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

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: false
    }
  }
}

test('displays profile', () => {
  const wrapper = mount(Nav)
  const profileLink = wrapper.get('#profile')
  expect(profileLink.text()).toEqual('Profile')
})

Nav 구성 요소가 있고 profile 를 사용하여 ID가 ​​wrapper.get인 요소를 가져옵니다.

그런 다음 text 메서드로 텍스트를 얻습니다.

주어진 선택자가 있는 요소가 다음을 사용하여 존재하는지 확인할 수 있습니다.

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

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: false
    }
  }
}

test('displays profile', () => {
  const wrapper = mount(Nav)
  const profileLink = wrapper.get('#profile')
  expect(profileLink.text()).toEqual('Profile')
})

test('does not render an admin link', () => {
  const wrapper = mount(Nav)
  expect(wrapper.find('#admin').exists()).toBe(false)
})

wrapper.find(‘#admin’).exists()는 주어진 선택기로 요소를 찾으려고 시도합니다.

또한 admin 반응 속성의 값을 변경하고 테스트하기 위해 자체 데이터를 전달할 수 있습니다.

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

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: true
    }
  }
}

test('renders an admin link', () => {
  const wrapper = mount(Nav, {
    data() {
      return {
        admin: true
      }
    }
  })
  expect(wrapper.get('#admin').text()).toEqual('Admin')
})

테스트에서 자체 data 함수를 전달하므로 admin 를 true 로 설정합니다.

이제 Admin 텍스트가 링크와 함께 렌더링되는 것을 확인할 수 있습니다.

결론

Vue Test Utils를 사용하여 렌더링된 Vue 3 구성 요소를 테스트할 수 있습니다.