0Pricing
Vue Academy · Aula

Simulação de composables, stores e APIs

vi.mock(), simulação de useFetch, simulação de stores do Pinia e simulação do roteador nos testes.

Simulação de composables, stores e APIs é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar mock?

Os testes unitários devem isolar o componente em teste. Chamadas de rede reais, stores reais e funções de composição pesadas tornam os testes lentos e instáveis. A simulação substitui essas dependências por versões falsas controláveis.

vi.fn: uma função de simulação

vi.fn() cria uma função monitorada. Você pode verificar como ela foi chamada e controlar o que ela retorna. Ela é o bloco de construção básico de toda simulação.

import { vi } from "vitest"

const onSave = vi.fn()
onSave("draft")
expect(onSave).toHaveBeenCalledWith("draft")
expect(onSave).toHaveBeenCalledTimes(1)

Definindo valores de retorno

Controle a saída de um mock com mockReturnValue (síncrono) ou mockResolvedValue (uma promessa resolvida) em código assíncrono.

const getId = vi.fn().mockReturnValue(42)
expect(getId()).toBe(42)

const fetchUser = vi.fn().mockResolvedValue({ name: "Ada" })
// await fetchUser() => { name: "Ada" }

Simulando um módulo de composição

vi.mock(path) substitui um módulo inteiro. Forneça uma fábrica que retorne exportações falsas. Use-a para substituir uma função de composição e fazer com que o componente receba dados previsíveis.

import { vi } from "vitest"

vi.mock("@/composables/useUser", () => ({
  useUser: () => ({
    user: { value: { name: "Ada" } },
    isLoading: { value: false },
  }),
}))

Elevação de vi.mock

As chamadas de vi.mock são elevadas para o topo do arquivo antes da execução das importações. Por isso, a fábrica não pode referenciar variáveis externas definidas posteriormente — declare qualquer auxiliar dentro da fábrica ou por meio de vi.hoisted.

// This runs before imports regardless of position.
vi.mock("@/api", () => ({ getPosts: vi.fn() }))

import { getPosts } from "@/api" // already the mock

Testando o store do Pinia

Componentes que usam um store do Pinia precisam de um store nos testes. @pinia/testing fornece createTestingPinia, que oferece um store cujas ações são simuladas por padrão.

// terminal: npm install -D @pinia/testing
import { createTestingPinia } from "@pinia/testing"

Instalando o Pinia para testes

Passe o Pinia de testes pela opção global plugins ao montar o componente. Você também pode definir o estado inicial.

import { mount } from "@vue/test-utils"
import { createTestingPinia } from "@pinia/testing"

const wrapper = mount(Profile, {
  global: {
    plugins: [createTestingPinia({
      initialState: { user: { name: "Ada" } },
    })],
  },
})

Verificando as ações do store

Por padrão, as ações são substituídas (não são executadas), para que você possa verificar se foram despachadas. Obtenha o store e verifique o spy.

import { useUserStore } from "@/stores/user"

const store = useUserStore()
await wrapper.get("button.logout").trigger("click")
expect(store.logout).toHaveBeenCalled()

Observando requisições de rede

Em vez de substituir um módulo inteiro, você pode observar uma função global. vi.spyOn(global, "fetch") envolve a busca real para que você possa substituí-la e inspecioná-la.

const spy = vi.spyOn(global, "fetch").mockResolvedValue({
  ok: true,
  json: async () => ({ items: [1, 2, 3] }),
})

Um teste completo de busca

Use mock para a busca, acione a ação, aguarde a conclusão das promessas, verifique os dados renderizados e confirme que a busca foi chamada com o URL correto.

it("loads items", async () => {
  vi.spyOn(global, "fetch").mockResolvedValue({
    ok: true,
    json: async () => ({ items: ["a", "b"] }),
  })
  const wrapper = mount(List)
  await flushPromises()
  expect(global.fetch).toHaveBeenCalledWith("/api/items")
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Redefinindo mocks entre testes

Simulações compartilhadas acumulam o histórico de chamadas. Redefina-as em beforeEach (ou ative clearMocks na configuração) para que um teste não interfira em outro.

import { beforeEach, vi } from "vitest"

beforeEach(() => {
  vi.clearAllMocks()
})

Verificação rápida

Verifique sua compreensão sobre simulação.

Recapitulação

Você aprendeu a simular dependências nos testes:

  • vi.fn() cria funções monitoradas; controle a saída com mockReturnValue / mockResolvedValue.
  • vi.mock(path, factory) substitui um módulo (por exemplo, uma função de composição); ele é elevado para antes das importações.
  • createTestingPinia de @pinia/testing fornece um store com ações substituídas que você pode verificar.
  • vi.spyOn(global, "fetch").mockResolvedValue(...) simula chamadas de rede.
  • Redefina as simulações entre os testes com vi.clearAllMocks().

Perguntas Frequentes

A aula “Simulação de composables, stores e APIs” é grátis?

Sim — o texto completo de “Simulação de composables, stores e APIs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Simulação de composables, stores e APIs”?

vi.mock(), simulação de useFetch, simulação de stores do Pinia e simulação do roteador nos testes. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Simulação de composables, stores e APIs”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do Vitest para projetos Vue
  2. Montagem e consulta de componentes
  3. Testes de interações e eventos do usuário
  4. Simulação de composables, stores e APIs
← Voltar para Vue Academy