В vue test utils $ refs установлен на пустой объект - PullRequest
Новая
       29

В vue test utils $ refs установлен на пустой объект

0 голосов
/ 10 июля 2020

Я устанавливаю компонент EditUser в тестах, используя функцию mount из vue-test-utils. EditUser имеет один дочерний компонент ChangePassword. mount должен монтировать все дочерние компоненты как есть, а не заглушать их. Я обращаюсь к методу ChangePassword components submit, используя ref, например, this.$refs.changePassword.submit(). Он отлично работает в браузере, но в тесте $refs устанавливается на пустой объект и не может получить доступ к методу отправки. Я использую шутку для тестирования своих vue компонентов.

В EditUSer.vue компоненте 

updatePassword() {
  this.$refs.changePassword.submit()
    .then(data => {
       this.successMessage = data.message
       this.$bvModal.hide('change-password-modal')
     })
     .catch(data => {
       console.error(data.message)
      })
}

В шаблоне 

<b-modal id="change-password-modal" title="Change Password" size="lg" @ok="updatePassword">
    <change-password ref="changePassword" :id="id"></change-password>
</b-modal>

И в ChangePassword.vue компоненте У меня есть метод отправки 

submit() {
  return this.form.patch('/api/users/' + this.id + '/password')
}

В тесте 

it ('updates password', async () => {
    moxios.stubRequest('/api/users/1/password', {
      status: 200,
      response: {
        message: 'Password updated successfully!'
      }
    })

    const wrapper = mount(EditUser, { propsData: { id: 1 } })
    const testUtils = new TestUtils(wrapper)

    wrapper.vm.updatePassword()

    await flushPromises()

    testUtils.see('Password updated successfully!')
  })

Он отлично работает в браузере, но в тесте (шутка) я получаю эту ошибку 

TypeError: Cannot read property 'submit' of undefined

      262 |       },
      263 |       updatePassword() {
    > 264 |         this.$refs.changePassword.submit()
          | ^
      265 |             .then(data => {
      266 |               this.successMessage = data.message
      267 |               this.$bvModal.hide('change-password-modal')

      at VueComponent.updatePassword (src/Users/EditUser.vue:264:1)
      at Object.<anonymous> (tests/unit/users/editUser.spec.js:64:16)
...