vue-test-utils-auto

Vue Test Utils Standards

Comprehensive testing standards for Vue 3 components using @vue/test-utils with TypeScript support.

Critical Rules

• Use @vue/test-utils with TypeScript for type-safe component testing
• Test component props, emits, slots, and user interactions thoroughly
• Mock composables and external dependencies appropriately
• Use data-testid attributes for reliable element selection
• Test component behavior, not implementation details
• Provide proper TypeScript types for test props and mocks

  ✅ Good component test structure:
  import { mount, VueWrapper } from "@vue/test-utils"
  import { describe, it, expect, vi, beforeEach } from "vitest"
  import UserProfile from "@/components/UserProfile.vue"
  import type { User } from "@/types/user"
  
  describe("UserProfile.vue", () => {
    let wrapper: VueWrapper<any>
    const mockUser: User = {
      id: 1,
      name: "John Doe",
      email: "[email protected]"
    }
    
    beforeEach(() => {
      wrapper = mount(UserProfile, {
        props: { user: mockUser }
      })
    })
    
    it("renders user information correctly", () => {
      expect(wrapper.find('[data-testid="user-name"]').text()).toBe("John Doe")
      expect(wrapper.find('[data-testid="user-email"]').text()).toBe("[email protected]")
    })
    
    it("emits update event when edited", async () => {
      await wrapper.find('[data-testid="edit-button"]').trigger("click")
      expect(wrapper.emitted("update")).toBeTruthy()
    })
  })
  
  ❌ Avoid untyped tests and unclear selectors:
  const wrapper = mount(UserProfile)
  expect(wrapper.find(".user-name").text()).toBe("John")

examples:

• input: | import { mount } from "@vue/test-utils" const wrapper = mount(UserProfile) expect(wrapper.find(".user-name").text()).toBe("John") output: | import { mount, VueWrapper } from "@vue/test-utils" import type { User } from "@/types/user"