Testing Vue components — Vue.js 3 (with Pinia, Vue Router & Nuxt basics)

16. Testing Vue components

IntermediateMediumLesson 16 of 17

import { mount } from "@vue/test-utils";
import { describe, it, expect } from "vitest";
import OrderCard from "@/components/OrderCard.vue";

describe("OrderCard", () => {
  it("emits select with the order id", async () => {
    const wrapper = mount(OrderCard, { props: { order: { id: 7, customer: "Asha", total: 500, status: "paid" } } });
    await wrapper.trigger("click");
    expect(wrapper.emitted("select")?.[0]).toEqual([7]);
    expect(wrapper.text()).toContain("Asha");
  });
});

Use @pinia/testing (createTestingPinia) to stub stores, mock HTTP with MSW, and test user-visible behaviour (Testing Library for Vue is also available). E2E with Playwright or Cypress.