Vue.jsユニットテストは、テストする方法をそのトリガーが適切ではないようです...イベントに私はフォーム送信テストしようとしています

Question

を提出

私VUEコンポーネントをテストする

1) calls store action login when the form is submitted 
LoginPage.vue 
TypeError: wrapper.find(...).trigger is not a function 
at Context.<anonymous> (webpack:///test/unit/specs/pages/LoginPage.spec.js:35:28 <- index.js:50826:29) 

LoginPage.vue

<template> 
    <div class="container"> 
     <div class="login-page"> 
     <h1 class="title">Login to existing account</h1> 
     <form @submit.prevent="submit()" class="form form--login grid"> 
      <div class="row"> 
      <label for="login__email">Email</label> 
      <input type="text" id="login__email" class="input--block" v-model="email" v-on:keyup="clearErrorMessage" /> 
      </div> 
      <div class="row"> 
      <label for="login__password">Password</label> 
      <input type="password" id="login__password" class="input--block" v-model="password" v-on:keyup="clearErrorMessage" /> 
      </div><!-- /.row --> 
      <div class="row"> 
      <label></label> 
      <button id="submit" type="submit">Login</button> 
      </div><!-- /.row --> 
      <div v-show='hasError' class="row"> 
      <label></label> 
      <p class="error">Invalid credentials</p> 
      </div> 
     </form> 
     </div><!-- /.login-page --> 
    </div> 
    </template> 

    <script> 
    import store from '@/vuex/store' 
    import { mapActions } from 'vuex' 
    import _ from 'underscore' 

    export default { 
     name: 'loginPage', 
     data() { 
     return { 
      email: 'john.doe@domain.com', 
      password: 'john123', 
      hasError: false 
     } 
     }, 
     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 
      } 
      }) 
     } 
     }), 
     store 
    } 
    </script> 

LoginPage.spec.js

 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 getters 
      let store 

      beforeEach(() => { 
      actions = { 
       login: sinon.stub() 
      } 
      getters = { 
       isAuthenticated:() => { 
       state => state.isAuthenticated 
       } 
      } 
      store = new Vuex.Store({ 
       actions, 
       getters, 
       state: { 
       isAuthenticated: false, 
       currentUserId: '' 
       } 
      }) 
      }) 

      it('calls store action login when the form is submitted', (done) => { 
      const wrapper = mount(LoginPage, { store }) 
      wrapper.find('#submit').trigger('submit') 
      wrapper.vm.$nextTick(() => { 
       expect(actions.login.calledOnce).to.equal(true) 
       done() 
      }) 
      }) 
     }) 

Answer 1

フォームタグをトリガーする必要があります。

it('calls store action login when the form is submitted', (done) => { 
    const wrapper = mount(LoginPage, { store }) 
    const form = wrapper.find('form')[0] 
    form.trigger('submit') 
    wrapper.vm.$nextTick(() => { 
     expect(actions.login.calledOnce).to.equal(true) 
     done() 
    }) 
    })