Pinia - Les tests unitaires

Voir les exemples et les explications dans le code exemple-pinia. La section Pinia : Testing stores du site officiel de Pinia est aussi une bonne source d'information. Ci-dessous un résumé.

Installer la libraire pour les tests

npm i -D @pinia/testing

Créer l'instance de Pinia 🍍

import { useAuthStore } from '../../stores/authStore.js'
    ...
    const pinia = createTestingPinia({
        stubActions: false,
        createSpy: vi.fn
    })
        ...

Faut-il créer une instance de Pinia pour chacun des tests ?
Oui, car sinon les tests ne seront pas indépendants.

Utiliser l'instance de Pinia

Pour les composants qui utilisent un store, il faut utiliser l'instance pinia créée ci-dessus dans plugins. Exemple :

const { findByText } = render(NavigationBar, {
    global: {
        plugins: [pinia]
    }
})

Accès au store

L'accès au store se fait de la même manière que dans un composant. Exemple :

const authStore = useAuthStore()

Ajouter des données au store

On peut ajouter des données dans le store en utilisant la propriété initialState lors de la création de l'instance de Pinia. Exemple d'ajout de données dans l'état todos d'un store dont le id est todoStoreId :

const todos = [
    { id: 1, text: 'Imaginer des licornes volantes', done: false },
    { id: 2, text: 'Compter les moutons dans Minecraft', done: false },
    { id: 3, text: 'Chanter sous la douche en allemand', done: true }
]
const pinia = createTestingPinia({
    stubActions: false,
    createSpy: vi.fn,
    initialState: {
        todoStoreId: {
            todos: [...todos]
        }
    }
})

On peut aussi modifier les données dans le store directement en utilisant son instance. Exemple :

const authStore = useAuthStore()
authStore.user = { id: 1, name: 'John Doe' }

Attention
Si le composant exécute des actions asynchrones, il faut attendre que ces actions soient terminées avant de vérifier les résultats.