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

【问题标题】：Vue Test Utils - data does not update after triggering click eventVue Test Utils - 触发点击事件后数据不更新
【发布时间】：2021-04-05 11:53:53
【问题描述】：

我使用 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')
})

如果我要么通过，测试才会通过

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

但是，按照documentation的说法，不应该是已经写好了就通过了吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-test-utils

【解决方案1】：

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

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

【讨论】：