Mocker Axios dans les tests Vue

Mise en place du mock d’Axios

Axios est largement utilisé pour les requêtes HTTP dans les applications Vue. Lors des tests unitaires, il est préférable de mocker Axios pour éviter les appels réseau réels et simuler différents scénarios de réponse.

Voici comment mocker Axios avec Vitest:

import { mount } from '@vue/test-utils'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import axios from 'axios'
import UserList from '@/components/UserList.vue'

// Mocker le module axios entier
vi.mock('axios')

describe('UserList.vue', () => {
  beforeEach(() => {
    // Réinitialiser les mocks avant chaque test
    vi.clearAllMocks()
  })

  it('fetches and displays users', async () => {
    // Configurer la réponse simulée d'axios
    const users = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ]

    // Simuler une réponse réussie
    axios.get.mockResolvedValue({ data: users })

    const wrapper = mount(UserList)

    // Attendre que toutes les promesses soient résolues
    await flushPromises()

    // Vérifier que axios.get a été appelé avec la bonne URL
    expect(axios.get).toHaveBeenCalledWith('/api/users')

    // Vérifier que les utilisateurs sont affichés correctement
    const userItems = wrapper.findAll('.user-item')
    expect(userItems.length).toBe(2)
    expect(userItems[0].text()).toContain('Alice')
    expect(userItems[1].text()).toContain('Bob')
  })

  it('handles error when API call fails', async () => {
    // Simuler une erreur
    axios.get.mockRejectedValue(new Error('Network Error'))

    const wrapper = mount(UserList)

    // Attendre que toutes les promesses soient résolues (ou rejetées)
    await flushPromises()

    // Vérifier que le message d'erreur s'affiche
    expect(wrapper.find('.error-message').exists()).toBe(true)
    expect(wrapper.text()).toContain('Erreur lors du chargement des utilisateurs')
  })
})

Simuler différents codes de statut HTTP

Vous pouvez simuler différents codes de statut HTTP pour tester comment votre application gère les réponses:

it('handles 404 error correctly', async () => {
  // Créer une erreur Axios avec un code de statut 404
  const error = new Error('Not Found')
  error.response = {
    status: 404,
    statusText: 'Not Found',
    data: { message: 'Resource not found' }
  }

  axios.get.mockRejectedValue(error)

  const wrapper = mount(UserList)

  await flushPromises()

  expect(wrapper.find('.not-found-message').exists()).toBe(true)
})

Simuler une requête en cours

Pour tester les états de chargement, vous pouvez retarder la résolution de la promesse:

it('shows loading state while fetching data', async () => {
  // Créer une promesse que nous résoudrons manuellement plus tard
  let resolvePromise
  const promise = new Promise(resolve => {
    resolvePromise = resolve
  })

  // Configurer axios.get pour retourner cette promesse
  axios.get.mockReturnValue(promise)

  const wrapper = mount(UserList)

  // À ce stade, la promesse n'est pas encore résolue
  expect(wrapper.find('.loading-spinner').exists()).toBe(true)

  // Résoudre la promesse avec des données
  resolvePromise({ data: [] })

  // Attendre que le composant réagisse
  await flushPromises()

  // Le spinner de chargement devrait maintenant être masqué
  expect(wrapper.find('.loading-spinner').exists()).toBe(false)
})

Mocker Axios pour des API spécifiques

Si vous avez créé des services API qui utilisent Axios, vous pouvez choisir de mocker ces services plutôt qu’Axios directement:

import { mount } from '@vue/test-utils'
import { vi, expect, describe, it } from 'vitest'
import UserService from '@/services/UserService'
import UserDashboard from '@/components/UserDashboard.vue'

// Mocker le service API plutôt qu'Axios
vi.mock('@/services/UserService')

describe('UserDashboard.vue', () => {
  it('uses UserService to fetch data', async () => {
    UserService.getUsers.mockResolvedValue([
      { id: 1, name: 'Alice' }
    ])

    const wrapper = mount(UserDashboard)

    await flushPromises()

    expect(UserService.getUsers).toHaveBeenCalled()
    expect(wrapper.text()).toContain('Alice')
  })
})