unit-test-vue-pinia

Use esta habilidade para criar ou revisar testes unitários para componentes Vue, composables e stores Pinia. Mantenha os testes pequenos, determinísticos e focados no comportamento.

Fluxo de Trabalho

1. Identifique primeiro o limite do comportamento: comportamento da UI do componente, comportamento do composable ou comportamento do store.
2. Escolha o estilo de teste mais restrito que possa provar esse comportamento.
3. Configure o Pinia com a opção menos poderosa que ainda cubra o cenário.
4. Conduza o teste através de entradas públicas, como props, atualizações de formulário, cliques de botão, eventos de filho emitidos e APIs de store.
5. Afirme as saídas observáveis e os efeitos colaterais antes de considerar qualquer afirmação em nível de instância.
6. Retorne ou revise os testes com nomes claros orientados ao comportamento e observe quaisquer lacunas de cobertura restantes.

Regras Principais

• Teste um comportamento por teste.
• Afirme o comportamento de entrada/saída observável primeiro (texto renderizado, eventos emitidos, chamadas de callback, alterações de estado do store).
• Evite afirmações acopladas à implementação.
• Acesse wrapper.vm apenas em casos excepcionais quando não houver uma afirmação razoável em nível de DOM, prop, emit ou store.
• Prefira configuração explícita em beforeEach() e reinicie os mocks a cada teste.
• Use o material de referência verificado em references/pinia-patterns.md como fonte local da verdade para configurações padrão de testes Pinia.

Abordagem de Teste Pinia

Use references/pinia-patterns.md primeiro, depois recorra ao cookbook de testes do Pinia quando os exemplos verificados não cobrirem o caso.

Padrão padrão para testes de componentes

Use createTestingPinia como um plugin global ao montar. Prefira createSpy: vi.fn como padrão para consistência e afirmações de spy de ação mais fáceis.

const wrapper = mount(ComponentUnderTest, {
	global: {
		plugins: [
			createTestingPinia({
				createSpy: vi.fn,
			}),
		],
	},
});

Por padrão, as ações são stubadas e espionadas. Use stubActions: true (padrão) quando o teste apenas precisar verificar se uma ação foi chamada (ou não chamada).

Configurações mínimas de Pinia aceitas

As seguintes também são válidas e não devem ser sinalizadas como incorretas:

• createTestingPinia({}) quando o teste não afirma o comportamento do spy de ação Pinia.
• createTestingPinia({ initialState: ... }) ou createTestingPinia({ stubActions: ... }) sem createSpy, quando o teste apenas precisa de semeadura de estado ou comportamento de stub de ação e não inspeciona spies gerados.
• setActivePinia(createTestingPinia(...)) em testes focados em store/composable (sem montar um componente) quando a semeadura/mock de stores dependentes for necessária.

Use createSpy: vi.fn quando as afirmações de spy de ação fizerem parte da intenção do teste.

Execute ações reais apenas quando necessário

Use stubActions: false apenas quando o teste precisar validar o comportamento real e os efeitos colaterais da ação. Não o ative por padrão para simples afirmações de "foi chamado".

const wrapper = mount(ComponentUnderTest, {
	global: {
		plugins: [
			createTestingPinia({
				createSpy: vi.fn,
				stubActions: false,
			}),
		],
	},
});

Semeie o estado do store com initialState

const wrapper = mount(ComponentUnderTest, {
	global: {
		plugins: [
			createTestingPinia({
				createSpy: vi.fn,
				initialState: {
					counter: { n: 20 },
					user: { name: "Leia Organa" },
				},
			}),
		],
	},
});

Adicione plugins Pinia através de createTestingPinia

const wrapper = mount(ComponentUnderTest, {
	global: {
		plugins: [
			createTestingPinia({
				createSpy: vi.fn,
				plugins: [myPiniaPlugin],
			}),
		],
	},
});

Padrão de substituição de getter para casos extremos

const pinia = createTestingPinia({ createSpy: vi.fn });
const store = useCounterStore(pinia);

store.double = 999;
// @ts-expect-error test-only reset of overridden getter
store.double = undefined;

Testes unitários puros de store

Prefira testes puros de store com createPinia() quando o objetivo for validar transições de estado do store e comportamento de ação sem renderização de componente. Use createTestingPinia() apenas quando precisar de stores dependentes stubados, doubles de teste semeados ou spies de ação.

beforeEach(() => {
	setActivePinia(createPinia());
});

it("increments", () => {
	const counter = useCounterStore();
	counter.increment();
	expect(counter.n).toBe(1);
});

Abordagem Vue Test Utils

Siga as orientações do Vue Test Utils: https://test-utils.vuejs.org/guide/

• Monte superficialmente por padrão para testes unitários focados.
• Monte árvores de componentes completas apenas quando o comportamento de integração for o assunto.
• Conduza o comportamento através de props, interações semelhantes às do usuário e eventos emitidos.

…