VUE配方 - 表单按钮上的测试事件发射单击使用测试库

发布于 2025-01-20 02:57:21 字数 1340 浏览 1 评论 0原文

我有以下组件,使用 vue配方

<template>
  <FormulateForm @submit="onSubmit">
    <button type="submit">Submit</button>
  </FormulateForm>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Issue',
  methods: {
    onSubmit(): void {
      this.$emit('my-special-event')
    },
  },
})
</script>

<style scoped></style>

我的目标是测试当我单击“提交”按钮时, My-Event-Event已发出。而且我需要使用 testing-library 。这是我的尝试:

import '@testing-library/jest-dom'
import { fireEvent, render } from '@testing-library/vue'
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import Issue from '~/components/Issue.vue'

describe('Issue component', () => {
  it('test', async () => {
    Vue.use(VueFormulate)
    const component = render(Issue)

    const submitBtn = component.getByText('Submit')
    await fireEvent.click(submitBtn)

    expect(component.emitted()).not.toEqual({})
  })
})

不幸的是,这无效 - 没有发出任何事件。不过,针对非形式形式的类似测试可以正常运行。

I have the following component, using Vue Formulate

<template>
  <FormulateForm @submit="onSubmit">
    <button type="submit">Submit</button>
  </FormulateForm>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Issue',
  methods: {
    onSubmit(): void {
      this.$emit('my-special-event')
    },
  },
})
</script>

<style scoped></style>

My goal is to test that, when I click the "Submit" button, my-special-event event is emitted. And I need to do this using testing-library. Here's my attempt:

import '@testing-library/jest-dom'
import { fireEvent, render } from '@testing-library/vue'
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import Issue from '~/components/Issue.vue'

describe('Issue component', () => {
  it('test', async () => {
    Vue.use(VueFormulate)
    const component = render(Issue)

    const submitBtn = component.getByText('Submit')
    await fireEvent.click(submitBtn)

    expect(component.emitted()).not.toEqual({})
  })
})

Unfortunately, this doesn't work - no events are emitted. A similar test for a non-Formulate form works ok, though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文