0Pricing
Vue Academy · 강의

Vue Test Utils를 활용한 단위 테스트

Vue Test Utils로 구성 요소 단위 테스트를 작성합니다.

Vue Test Utils를 활용한 단위 테스트은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

컴포넌트 테스트하기

Vue 테스트 유틸리티를 사용하면 테스트에서 컴포넌트를 렌더링하고 출력을 검사하며 사용자 상호 작용을 시뮬레이션할 수 있습니다. 그런 다음 컴포넌트가 예상대로 동작하는지 검증합니다.

마운트

mount 함수는 모든 자식 컴포넌트를 포함하여 컴포넌트를 완전히 렌더링합니다. 렌더링된 출력을 조회하고 상호 작용할 수 있는 도우미가 포함된 wrapper 객체를 반환합니다.

import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"

const wrapper = mount(Counter)

shallowMount

shallowMount는 컴포넌트를 렌더링하지만 자식 컴포넌트를 스텁으로 대체합니다. 테스트 대상 컴포넌트를 자식으로부터 격리하므로 진정한 단위 테스트에 적합합니다.

import { shallowMount } from "@vue/test-utils"

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

마운트와 shallowMount 비교

자식 컴포넌트와 함께 컴포넌트를 테스트하려면 mount를 사용하고, 현재 컴포넌트만 격리하려면 shallowMount를 사용하십시오. 얕은 마운트는 테스트의 초점을 유지하고 실행 속도를 빠르게 합니다.

요소 찾기

CSS 선택자와 함께 wrapper.find를 사용하여 요소를 찾으십시오. find는 검사하거나 상호 작용할 수 있는 해당 요소의 래퍼를 반환합니다.

const button = wrapper.find("button")
const title = wrapper.find(".title")

렌더링된 출력 검증하기

렌더링된 텍스트나 HTML을 확인하여 컴포넌트가 예상한 내용을 표시하는지 검증하십시오.

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

속성 테스트하기

마운트 옵션을 통해 속성을 전달하고 컴포넌트가 속성을 올바르게 렌더링하는지 검증하십시오. 이를 통해 컴포넌트가 입력값에 반응하는지 확인할 수 있습니다.

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

이벤트 발생시키기

trigger를 사용하여 사용자 동작을 시뮬레이션하십시오. 이 함수는 프로미스를 반환하므로 기다린 후 검증해야 Vue가 DOM을 업데이트할 수 있습니다.

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

입력값 설정하기

입력 래퍼에 setValue를 사용하여 입력을 시뮬레이션한 다음 그 결과로 나타나는 동작을 검증하십시오.

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

발생한 이벤트 테스트하기

컴포넌트가 이벤트를 발생시키면 wrapper.emitted가 해당 이벤트를 기록합니다. 올바른 이벤트가 올바른 페이로드와 함께 발생했는지 검증하십시오.

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

테스트 완성하기

완전한 컴포넌트 테스트는 컴포넌트를 마운트하고, 상호 작용한 다음 출력이나 발생한 이벤트를 검증합니다.

import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

빠른 확인

Vue 테스트 유틸리티에 대한 지식을 테스트해 보십시오.

복습

Vue 테스트 유틸리티는 mount(전체 트리) 또는 shallowMount(스텁 처리된 자식)를 사용하여 컴포넌트를 렌더링합니다. find로 조회하고, trigger와 setValue로 동작을 시뮬레이션한 다음 이를 기다리고, text() 또는 emitted()를 검증하십시오. 마운트 옵션을 통해 props를 전달합니다. 다음에는 종단 간 방식으로 전체 앱을 테스트합니다.

자주 묻는 질문

“Vue Test Utils를 활용한 단위 테스트” 강의는 무료인가요?

네 — “Vue Test Utils를 활용한 단위 테스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“Vue Test Utils를 활용한 단위 테스트”에서 뭘 배우나요?

Vue Test Utils로 구성 요소 단위 테스트를 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“Vue Test Utils를 활용한 단위 테스트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 테스트 프레임워크 소개
  2. Vue Test Utils를 활용한 단위 테스트
  3. 종단 간 테스트
← Vue Academy(으)로 돌아가기