Raccourcir des getters vuex avec sinonjs

Question

Sur mon application, à l'intérieur d'une garde de navigation utilisée par mon routeur, j'ai un getter pointé par vuex pour vérifier l'état d'authentification. Le getter effectue la vérification de la sous-couche magique si l'utilisateur est authentifié.

Je veux écrire un test unitaire simple qui vérifie que la redirection est faite selon l'état authentifié. Je suis coincé sur la réduction du getter.

Mon getter est la suivante:

isAuthenticated (state) { 
    return state.token !== null 
} 

Mon module d'authentification est la suivante:

export default { 
    namespaced: true, 
    state, 
    getters 
} 

Et mon magasin est la suivante:

export default new Vuex.Store({ 
    modules: { 
     authentication 
    } 
}) 

Mon garde naviguation est:

import store from '@/store' 

export default (to, from, next) => { 
    if (store.getters['authentication/isAuthenticated']) { 
    next() 
    return 
    } 

    next({name: 'login'}) 
} 

J'ai écrit ce test d'unité:

describe('authenticated-guard.spec.js',() => { 
     let authenticatedStub 
     beforeEach(() => { 
     authenticatedStub = sandbox.stub(store.getters, 'authentication/isAuthenticated') 
     }) 

     afterEach(() => { 
     sandbox.restore() 
     }) 

     it('should redirect to login route when the user is not authenticated',() => { 
     // Given 
     const to = {} 
     const from = {} 
     const next = spy() 
     authenticatedStub.value(false) 

     // When 
     authenticatedGuard(to, from, next) 

     // Then 
     assert.ok(next.calledWith({name: 'login'}), 'should have redirected to login route') 
     }) 
    }) 

Le test unitaire déclenche l'erreur suivante: TypeError: Cannot redefine property: authentication/isAuthenticated.

J'ai essayé de remplacer le stub en utilisant authenticatedStub.value(false) mais l'erreur est la même. Je suis incapable de talonner le getter pour éviter d'avoir des logiques de stockage sur les tests de garde.

Est-ce que quelqu'un est capable d'absorber n'importe quel getter à l'extérieur des composants?

Cordialement

Answer 1

Le problème est que vuex définit les getters que sur les propriétés configurables, de sorte qu'ils ne peuvent pas être changé.

Une façon de les stub est à lui-même bouchonner l'objet getters afin que votre test pourrait fonctionner comme ceci:

describe('authenticated-guard.spec.js',() => { 
    it('should redirect to',() => { 
    const authenticatedStub = sandbox.stub(store, 'getters') 
    // Given 
    const to = {} 
    const from = {} 
    const next = spy() 
    authenticatedStub.value({ 
     'authentication/isAuthenticated': false 
    }) 

    // When 
    authenticatedGuard(to, from, next) 

    // Then 
    expect(next.lastCall.args).to.deep.equal([{name: 'login'}], 'login route when the user is not authenticated') 

    authenticatedStub.value({ 
     'authentication/isAuthenticated': true 
    }) 

    authenticatedGuard(to, from, next) 

    expect(next.lastCall.args).to.deep.equal([], 'next route when the user is authenticated') 
    }) 
})