Vue 3 + Pinia store and component tests with @pinia/testing (Vitest): working versions (tested 2026-10-15)

{
  "name": "vue-pinia-testing",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "vitest run --reporter=default --reporter=json --outputFile=test-report.json"
  },
  "dependencies": {
    "vue": "3.5.44",
    "pinia": "4.1.0"
  },
  "devDependencies": {
    "@types/node": "24.19.2",
    "vitest": "5.0.4",
    "@pinia/testing": "2.0.2",
    "@vue/test-utils": "2.5.1",
    "jsdom": "30.1.3"
  }
}

import { defineConfig } from "vitest/config";
export default defineConfig({ test: { environment: "jsdom" } });

import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useCart = defineStore("cart", () => {
  const items = ref<{ sku: string; price: number; qty: number }[]>([]);
  const total = computed(() => items.value.reduce((n, i) => n + i.price * i.qty, 0));
  function add(sku: string, price: number) {
    const hit = items.value.find((i) => i.sku === sku);
    if (hit) hit.qty++; else items.value.push({ sku, price, qty: 1 });
  }
  async function checkout(api: (items: unknown) => Promise<string>) {
    const id = await api(items.value);
    items.value = [];
    return id;
  }
  return { items, total, add, checkout };
});

import { defineComponent, h } from "vue";
import { useCart } from "./cart";

// Render function instead of an SFC so the recipe needs no Vite Vue plugin.
export const CartBadge = defineComponent({
  setup() {
    const cart = useCart();
    return () => h("div", [
      h("span", { "data-test": "total" }, `$${cart.total}`),
      h("button", { onClick: () => cart.add("mug", 10) }, "Add mug"),
    ]);
  },
});

import { describe, it, expect, beforeEach, vi } from "vitest";
import { setActivePinia, createPinia } from "pinia";
import { createTestingPinia } from "@pinia/testing";
import { mount } from "@vue/test-utils";
import { useCart } from "../src/cart";
import { CartBadge } from "../src/CartBadge";

describe("store", () => {
  beforeEach(() => setActivePinia(createPinia())); // fresh store per test
  it("adds and totals", () => {
    const cart = useCart();
    cart.add("mug", 10); cart.add("mug", 10); cart.add("tee", 25);
    expect(cart.total).toBe(45);
  });
  it("checkout clears items", async () => {
    const cart = useCart();
    cart.add("mug", 10);
    expect(await cart.checkout(async () => "ord_1")).toBe("ord_1");
    expect(cart.items).toEqual([]);
  });
});

describe("component", () => {
  it("renders from initial state with stubbed actions", async () => {
    const w = mount(CartBadge, { global: { plugins: [createTestingPinia({ createSpy: vi.fn, initialState: { cart: { items: [{ sku: "tee", price: 25, qty: 2 }] } } })] } });
    expect(w.get("[data-test=total]").text()).toBe("$50");
    await w.get("button").trigger("click");
    expect(useCart().add).toHaveBeenCalledWith("mug", 10);
    expect(w.get("[data-test=total]").text()).toBe("$50"); // actions are stubbed
  });
  it("real actions with stubActions: false", async () => {
    const w = mount(CartBadge, { global: { plugins: [createTestingPinia({ createSpy: vi.fn, stubActions: false })] } });
    await w.get("button").trigger("click");
    expect(w.get("[data-test=total]").text()).toBe("$10");
  });
});