使用 Jest 中的提交按钮无法触发 Vuetify 表单提交

Question

我正在尝试使用 Jest 和 Avoriaz 验证基于 Vuetify 组件的 Vue 表单的行为。
我可以在表单上触发submit.prevent ，从而导致预期的行为。
但是触发click提交按钮不起作用。

组件：

<template>
  <v-form
    ref="form"
    data-cy="form"
    @submit.prevent="login"
  >
    <v-text-field
      id="email"
      v-model="email"
      label="Email"
      name="email"
      prepend-icon="mdi-at"
      type="text"
      required
      autofocus
      data-cy="email-text"
    />
    <v-btn
      color="primary"
      type="submit"
      data-cy="login-btn"
    >
      Login
    </v-btn>
  </v-form>
</template>

<script>

export default {
  data () {
    return {
      email: 'test@test.com',
    }
  },
  computed: {},
  methods: {
    login: function () {
      console.log('Logging in')
    }
  }
}
</script>

测试设置：

import vuetify from '@/plugins/vuetify'
import { mount } from 'avoriaz'
import Form from '@/views/Form'

describe('Form', () => {
  const mountFunction = options => {
    return mount(Form, {
      vuetify,
      ...options
    })
  }

Vue 和 Vuetify 设置在@/plugins/vuetify完成的@/plugins/vuetify ：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
})

以下测试成功（因此模拟工作）：

  it('can trigger form directly', () => {
    const login = jest.fn()
    const wrapper = mountFunction()
    wrapper.setData({ 'email': 'test@com' })
    wrapper.setMethods({ login })

    let element = wrapper.first('[data-cy=form]')
    element.trigger('submit.prevent')

    expect(login).toHaveBeenCalledTimes(1)
  })

但实际测试提交按钮，失败：

  it('can trigger form through button', () => {
    const login = jest.fn()
    const wrapper = mountFunction()
    wrapper.setData({ 'email': 'test@test.com' })
    wrapper.setMethods({ login })

    const button = wrapper.first('[type=submit]')
    button.trigger('click')

    expect(login).toHaveBeenCalledTimes(1)
  })

更新：也许package.json一些相关依赖项：

{
  ..
  "dependencies": {
    "axios": "^0.19.1",
    "core-js": "^3.4.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    ..
    "avoriaz": "^6.3.0",
    "vue-jest": "^3.0.5",
    "vuetify-loader": "^1.3.0"
  }
}

更新：当使用 test-utils、非 Vuetify 组件（ <form>和<btn ）时，以下测试成功：

const localVue = createLocalVue()

localVue.use(Vuetify)
describe('Form', () => {
  const mountFunction = options => {
    return shallowMount(Form, {
      localVue,
      vuetify,
      ...options
    })
  }
  it('can trigger form through button alternative', async () => {
    const login = jest.fn()
    const wrapper = mountFunction({ attachToDocument: true })
    try {
      wrapper.setData({ 'email': 'test@test.com' })
      wrapper.setMethods({ login })

      const button = wrapper.find('[type=submit]')
      expect(button).toBeDefined()
      button.trigger('click')
      await Vue.nextTick()

      expect(login).toHaveBeenCalledTimes(1)
    } finally {
      wrapper.destroy()
    }
  })
})

然后切换到 Vuetify 组件导致测试失败。

Answer 1

显然，在使用 Vuetify 组件（ <v-form>和<v-btn> ）时，需要一些关键要素才能使其工作：

• Vue测试工具代替 avoriaz
• mount而不是shallowMount
• 包括attachToDocument ，这也需要事后清理（ wrapper.destroy() ）
• 正如@Husam Ibrahim 也提到的，需要async await Vue.nextTick()
• 为了让 setData 充分发挥作用，您可能需要额外await Vue.nextTick() 。 在我的完整代码中，我有表单验证（输入有:rules ，表单上有v-model ，按钮的:disabled绑定到v-model数据元素。这需要两个nextTick() s

以下工作（使用'@/plugins/vuetify'与问题中相同：

import vuetify from '@/plugins/vuetify'
import Vue from 'vue'
import { createLocalVue, mount } from '@vue/test-utils'
import Form from '@/views/Form'
import Vuetify from 'vuetify/lib'

const localVue = createLocalVue()

localVue.use(Vuetify)

describe('Form', () => {
  const mountFunction = options => {
    return mount(Form, {
      localVue,
      vuetify,
      ...options
    })
  }
  it('can trigger form through button alternative', async () => {
    const login = jest.fn()
    const wrapper = mountFunction({ attachToDocument: true })
    try {
      wrapper.setData({ 'email': 'test@test.com' })
      await Vue.nextTick() # might require multiple
      wrapper.setMethods({ login })

      const button = wrapper.find('[type=submit]')
      button.trigger('click')
      await Vue.nextTick()

      expect(login).toHaveBeenCalledTimes(1)
    } finally {
      wrapper.destroy()
    }
  })
})

Answer 2

这可能是一个异步问题。 我会尝试在触发点击事件之后和断言之前等待Vue.nextTick() ..

  it('can trigger form through button', async () => {
    const login = jest.fn()
    const wrapper = mountFunction()
    wrapper.setData({ 'email': 'test@test.com' })
    wrapper.setMethods({ login })

    const button = wrapper.first('[type=submit]')
    button.trigger('click')

    await Vue.nextTick()
    expect(login).toHaveBeenCalledTimes(1)
  })