Vue.js（2.0）ユニットテストの問題

Question

は私のaction.spec.js

import actions from '@/vuex/actions' 
import * as types from '@/vuex/mutation_types' 

describe('actions.js',() => { 
    var server, store, lists, successPut, successPost, successDelete 

    successDelete = {'delete': true} 
    successPost = {'post': true} 
    successPut = {'put': true} 

    beforeEach(() => { 
    // mock shopping lists 
    lists = [{ 
     id: '1', 
     title: 'Groceries' 
    }, { 
     id: '2', 
     title: 'Clothes' 
    }] 

    // mock store commit and dispatch methods 
    store = { 
     commit: (method, data) => {}, 
     dispatch:() => { 
     return Promise.resolve() 
     }, 
     state: { 
     shoppinglists: lists 
     } 
    } 
    sinon.stub(store, 'commit') 

    // mock server 
    server = sinon.fakeServer.create() 
    server.respondWith('GET', /shoppinglists/, xhr => { 
     xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(lists)) 
    }) 
    server.respondWith('POST', /shoppinglists/, xhr => { 
     xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPost)) 
    }) 
    server.respondWith('PUT', /shoppinglists/, xhr => { 
     xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPut)) 
    }) 
    server.respondWith('DELETE', /shoppinglists/, xhr => { 
     xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successDelete)) 
    }) 
    server.autoRespond = true 
    }) 

    afterEach(() => { 
    // restore stubs and server mock 
    store.commit.restore() 
    server.restore() 
    }) 

    describe('populateShoppingLists',() => { 
    it('should call commit method with POPULATE_SHOPPING_LIST string parameter', done => { 
     actions.populateShoppingLists(store).then(() => { 
     expect(store.commit).to.have.been.calledWith(types.POPULATE_SHOPPING_LISTS, lists) 
     done() 
     }).catch(done) 
    }) 
    }) 

    describe('changeTitle',() => { 
    it('should call commit method with CHANGE_TITLE string', (done) => { 
     let title = 'new title' 

     actions.changeTitle(store, {title: title, id: '1'}).then(() => { 
     expect(store.commit).to.have.been.calledWith(types.CHANGE_TITLE, {title: title, id: '1'}) 
     done() 
     }).catch(done) 
    }) 
    }) 

    describe('updateList',() => { 
    it('should return successful PUT response', (done) => { 
     actions.updateList(store, '1').then((data) => { 
     expect(data.data).to.eql(successPut) 
     done() 
     }).catch(done) 
    }) 
    }) 

    describe('createShoppingList',() => { 
    it('should return successful POST response', (done) => { 
     let newList = { title: 'new list', id: '3' } 
     actions.createShoppingList(store, newList).then((testResponse) => { 
     console.log('testResponse: ', testResponse) 
     expect(testResponse.body).to.eql(successPost) 
     done() 
     }).catch(done) 
    }) 
    }) 
}) 

はこちらです私action.js

import { CHANGE_TITLE, POPULATE_SHOPPING_LISTS } from './mutation_types' 
import api from '../api' 
import getters from './getters' 

export default { 
    populateShoppingLists: ({ commit }) => { 
    return api.fetchShoppingLists().then(response => { 
     commit(POPULATE_SHOPPING_LISTS, response.data) 
    }) 
    }, 

    changeTitle: (store, data) => { 
    store.commit(CHANGE_TITLE, data) 
    return store.dispatch('updateList', data.id) 
    }, 

    updateList: (store, id) => { 
    let shoppingList = getters.getListById(store.state, id) 
    return api.updateShoppingList(shoppingList) 
    }, 

    createShoppingList: (store, shoppinglist) => { 
    return api.addNewShoppingList(shoppinglist).then((actionResponse) => { 
     console.log('actionResponse: ', actionResponse) 
     store.dispatch('populateShoppingLists') 
    }) 
    }, 
} 

私のユニットテストを実行しているが、私はに問題がありますcreateShoppingListアクションで、REPONSEをリターンに送り返されていないことを示すので、（testResponse.body）.to.eqlを期待whicj createShoppingList試験

にconsole.log

actions.js 
    populateShoppingLists 
     ✓ should call commit method with POPULATE_SHOPPING_LIST string parameter 
    changeTitle 
     ✓ should call commit method with CHANGE_TITLE string 
    updateList 
     ✓ should return successful PUT response 
LOG LOG: 'actionResponse: ', Response{url: 'http://localhost:3000/shoppinglists', ok: true, status: 200, statusText: 'OK', headers: Headers{map: Object{Content-Type: ...}}, body: Object{post: true}, bodyText: '{"post":true}'} 
LOG LOG: 'testResponse: ', undefined 
    createShoppingList 
     ✗ should return successful POST response 
     undefined is not an object (evaluating 'testResponse.body') 
     webpack:///test/unit/specs/vuex/actions.spec.js:90:28 <- index.js:15508:28 
     webpack:///~/vue-resource/dist/vue-resource.es2015.js:151:0 <- index.js:17984:52 
     webpack:///~/vue/dist/vue.esm.js:701:0 <- index.js:3198:18 
     nextTickHandler@webpack:///~/vue/dist/vue.esm.js:648:0 <- index.js:3145:16 

（successPost）が真ではありません...

この場合私の約束事は何ですか？あなたは正しい軌道に乗っているフィードバック

Answer 1

ため

感謝 - testResponsecreateShoppingListが指定されていた、addNewShoppingList.thenの戻り値を解決し、undefinedデフォルトので、undefinedです。

createShoppingListはaddNewShoppingListさんの回答またはpopulateShoppingListsの回答で解決しますか？かつての場合は、ハンドラからactionResponseを返す：

return api.addNewShoppingList(shoppinglist).then((actionResponse) => { 
    store.dispatch('populateShoppingLists') 
    return actionResponse 
}); 

サイドノートとして、あなたがテストしているアクションが約束されているので、あなたのテストでget rid of doneをすることができ、直接アクションを返すことによって：

it('should call commit method with POPULATE_SHOPPING_LIST string parameter',() => { 
    // mocha will fail the test if the promise chain rejects or the expectation is not met 
    return actions.populateShoppingLists(store).then(() => { 
    expect(store.commit).to.have.been.calledWith(types.POPULATE_SHOPPING_LISTS, lists) 
    }) 
}) 

を