Vuex: API 호출을 사용한 테스트 작업

Vuex: API 호출을 사용한 테스트 작업

저는 vuex 스토어를 테스트하기 위해 이 테스트 가이드라인을 따르고 있습니다.그런데 액션 파트를 언급했을 때 이해할 수 없는 일들이 많이 일어나고 있다는 걸 느꼈어요.

첫 번째 부분은 다음과 같습니다.

// actions.js
import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  shop.getProducts(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}
// actions.spec.js

// use require syntax for inline loaders.
// with inject-loader, this returns a module factory
// that allows us to inject mocked dependencies.
import { expect } from 'chai'
const actionsInjector = require('inject!./actions')

// create the module with our mocks
const actions = actionsInjector({
  '../api/shop': {
    getProducts (cb) {
      setTimeout(() => {
        cb([ /* mocked response */ ])
      }, 100)
    }
  }
})

나는 이것이 행동 속에서 서비스를 조롱하기 위한 것이라고 추론한다.

다음 부분은 다음과 같습니다.

// helper for testing action with expected mutations
const testAction = (action, payload, state, expectedMutations, done) => {
  let count = 0

  // mock commit
  const commit = (type, payload) => {
    const mutation = expectedMutations[count]
    expect(mutation.type).to.equal(type)
    if (payload) {
      expect(mutation.payload).to.deep.equal(payload)
    }
    count++
    if (count >= expectedMutations.length) {
      done()
    }
  }

  // call the action with mocked store and arguments
  action({ commit, state }, payload)

  // check if no mutations should have been dispatched
  if (expectedMutations.length === 0) {
    expect(count).to.equal(0)
    done()
  }
}

describe('actions', () => {
  it('getAllProducts', done => {
    testAction(actions.getAllProducts, null, {}, [
      { type: 'REQUEST_PRODUCTS' },
      { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
    ], done)
  })
})

이것이 내가 따라가기 어려운 부분이다.

매장 외관:

import * as NameSpace from '../NameSpace'
import { ParseService } from '../../Services/parse'

const state = {
  [NameSpace.AUTH_STATE]: {
    auth: {},
    error: null
  }
}

const getters = {
  [NameSpace.AUTH_GETTER]: state => {
    return state[NameSpace.AUTH_STATE]
  }
}

const mutations = {
  [NameSpace.AUTH_MUTATION]: (state, payload) => {
    state[NameSpace.AUTH_STATE] = payload
  }
}

const actions = {
  [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => {
    ParseService.login(payload.username, payload.password)
      .then((user) => {
        commit(NameSpace.AUTH_MUTATION, {auth: user, error: null})
      })
      .catch((error) => {
        commit(NameSpace.AUTH_MUTATION, {auth: [], error: error})
      })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

그리고 이것이 제가 테스트하려는 방법입니다.

import * as NameSpace from 'src/store/NameSpace'
import AuthStore from 'src/store/modules/authorization'
const actionsInjector = require('inject!../../../../../src/store/modules/authorization')
// This file is present at: test/unit/specs/store/modules/authorization.spec.js 
// src and test are siblings


describe('AuthStore Actions', () => {
  const injectedAction = actionsInjector({
    '../../Services/parse': {
      login (username, password) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (Math.random() > 0.5) {
              resolve({})
            } else {
              reject({})
            }
          }, 300)
        })
      }
    }
  })

  it('Gets the user profile if the username and password matches', () => {
    const testAction = (action, payload, state, mutations, done) => {
      const commit = (payload) => {
        if (payload) {
          expect(mutations.payload).to.deep.equal(payload)
        }
      }
      action({ commit, state }, payload)
        .then(result => {
          expect(state).to.deep.equal({auth: result, error: null})
        })
        .catch(error => {
          expect(state).to.deep.equal({auth: [], error: error})
        })
    }
    testAction(injectedAction.login, null, {}, [])
  })
})

이렇게 하면 다음과 같은 결과가 나옵니다.

"Gets the user profile if the username and password matches"
undefined is not a constructor (evaluating 'action({ commit: commit, state: state }, payload)')
"testAction@webpack:///test/unit/specs/store/modules/authorization.spec.js:96:13 <- index.js:26198:14
webpack:///test/unit/specs/store/modules/authorization.spec.js:104:15 <- index.js:26204:16"

이러한 행동을 테스트하려면 어떻게 해야 하는지 이해하는 데 도움이 필요합니다.

오랜만이긴 하지만 저도 비슷한 문제가 있어서 이런 질문을 하게 되었습니다.testAction 호출 직전에 console.log injectedActions를 실행하면 injectedAction 객체가 실제로 다음과 같이 나타납니다.

Object{default: Object{FUNC_NAME: function FUNC_NAME(_ref) { ... }}}

따라서 여기서의 주요 솔루션은 testAction 호출을 다음과 같이 변경하는 것입니다.

testAction(injectedAction.default.login, null, {}, [], done)

작업을 저장소에서 기본값으로 내보내고 있기 때문입니다.

특정 오류와 관련이 없는 몇 가지 다른 문제...testAction 보일러 플레이트 코드를 조작할 필요가 없습니다.적절한 파라미터를 전달하기만 하면 정상적으로 동작합니다.또한 testAction에 Done을 통과해야 합니다. 통과하지 않으면 테스트가 타임아웃됩니다.이걸 발견한 다른 누군가가 도움이 되길 바라!

언급URL : https://stackoverflow.com/questions/41532266/vuex-testing-actions-with-api-calls