Home » vue » vue.js unit test w sinon, how to stub a method?

vue.js unit test w sinon, how to stub a method?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I would like to stub this method ( this.login(°. ) in my submit method of a component, but I get an error :

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

here is the method :

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

I tried the following

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

in my spec

    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: '[email protected]', 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)
      })
Answers:

just stubbing the action with a Promise resolving the status ( 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()
        })
      })
    })