javascript - Vue Test Utils - 触发点击事件后数据不更新

Question

我使用 Vue Test Utils 进行了这个基本测试：

import { mount } from '@vue/test-utils'

const App = {
  template: `
    <p>Count: {{ count }}</p>
    <button @click="handleClick">Increment</button>
  `,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count += 1
    }
  }
}

test('it increments by 1', async () => {
  const wrapper = mount(App, {
    data() {
      return {
        count: 0
      }
    }
  })
  expect(wrapper.html()).toContain('Count: 0')
  await wrapper.find('button').trigger('click')
  expect(wrapper.html()).toContain('Count: 1')
})

只有当我要么

• 不要将任何自定义数据发送到 mount 方法，或者
• 强制重新渲染，wrapper.vm.$forceUpdate()在触发事件后使用。

但是，根据文档，它不应该像已经写好的那样通过吗？

标签： javascriptvue.jsvuejs2vue-test-utils

Answer 1

测试很好，在 vue2 中你必须向模板添加根。组件模板应该只包含一个根元素。

<div>
    <p>Count: {{ count }}</p>
    <button @click="handleClick">Increment</button>
</div>