Đổ gáy vuex getters bằng sinonjs

Question

Trên ứng dụng của tôi, bên trong bộ phận điều hướng được bộ định tuyến của tôi sử dụng, tôi có một bộ thu thập tên miền không gian để kiểm tra trạng thái xác thực. Bộ getter thực hiện kiểm tra lớp phủ ma thuật nếu người dùng được xác thực.

Tôi muốn viết một bài kiểm tra đơn vị đơn giản kiểm tra xem chuyển hướng có được thực hiện theo trạng thái đã được xác thực hay không. Tôi bị mắc kẹt khi đang cuống máy.

getter của tôi là như sau:

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

module xác thực của tôi là như sau:

export default { 
    namespaced: true, 
    state, 
    getters 
} 

Và cửa hàng của tôi là như sau:

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

bảo vệ naviguation của tôi là:

import store from '@/store' 

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

    next({name: 'login'}) 
} 

Tôi đã viết rằng bài kiểm tra đơn vị:

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') 
     }) 
    }) 

Các đơn vị kiểm tra kích hoạt các lỗi sau: TypeError: Cannot redefine property: authentication/isAuthenticated.

Tôi đã thử thay thế cho sơ khai bằng cách sử dụng authenticatedStub.value(false) nhưng lỗi là như nhau. Tôi không thể khai báo getter để tránh lưu trữ các logics về kiểm tra bảo vệ.

Có ai đó có thể đánh cắp bất kỳ người nhặt đồ nào ngoài các thành phần không?

Kính trọng

Answer 1

Vấn đề là vuex đặt getters là thuộc tính không thể định cấu hình để không thể thay đổi.

Một cách để còn sơ khai họ là còn sơ khai đối tượng getters bản thân để thử nghiệm của bạn có thể làm việc như thế này:

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') 
    }) 
})