Question

我想在我的组件提交方法中存根这个方法（this.login（°。），但是我收到错误：

✗ calls store action login when the form is submitted
    TypeError: Cannot stub non-existent own property login

这是方法：

      methods: _.extend({}, mapActions(['login']), {
        clearErrorMessage () {
          this.hasError = false
        },
        submit () {
          return this.login({user: { email: this.email, password: this.password }})
          .then((logged) => {
            if (logged) {
              this.$router.push('shoppinglists')
            } else {
              this.hasError = true
            }
          })
        }
      }),

我尝试了以下

sandbox.stub(LoginPage, 'login').withArgs(payload).returns(Promise.resolve(response))

在我的规范中

    describe('LoginPage.vue', () => {
      let actions
      let getters
      let store
      var sandbox, payload, response

      beforeEach(() => {
        sandbox = sinon.sandbox.create()
        ...
      })

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

      it('calls store action login when the form is submitted', () => {
        payload = {user: {email: 'john.doe@domain.com', password: 'john123'}}
        response = true
        sandbox.stub(LoginPage, 'login').withArgs(payload).returns(Promise.resolve(response))
        const wrapper = mount(LoginPage, { store })
        const form = wrapper.find('form')[0]
        form.trigger('submit')
        expect(actions.login.calledOnce).to.equal(true)
      })

Answer 1

使用Promise解析状态（true / false

）来阻止操作

    import LoginPage from '@/pages/LoginPage'
    import Vue from 'vue'
    import Vuex from 'vuex'
    import sinon from 'sinon'
    import { mount } from 'avoriaz'

    Vue.use(Vuex)

    describe('LoginPage.vue', () => {
      let actions
      let store
      let sandbox

      beforeEach(() => {
        sandbox = sinon.sandbox.create()
      })

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

      it('calls store action login when the form is submitted, w good credentials', (done) => {
        actions = {
          login: sandbox.stub().returns(Promise.resolve(true))
        }
        store = new Vuex.Store({
          actions
        })
        const wrapper = mount(LoginPage, { store })
        const form = wrapper.find('form')[0]
        form.trigger('submit')
        wrapper.vm.$nextTick(() => {
          expect(actions.login.calledOnce).to.equal(true)
          expect(wrapper.data().hasError).to.equal(false)
          done()
        })
      })

      it('calls store action login when the form is submitted, w wrong credentials', (done) => {
        actions = {
          login: sandbox.stub().returns(Promise.resolve(false))
        }
        store = new Vuex.Store({
          actions
        })
        const wrapper = mount(LoginPage, { store })
        const form = wrapper.find('form')[0]
        form.trigger('submit')
        wrapper.vm.$nextTick(() => {
          expect(actions.login.calledOnce).to.equal(true)
          expect(wrapper.data().hasError).to.equal(true)
          done()
        })
      })
    })

vue.js单元测试w sinon，如何存根方法？

1 个答案: