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() 强制重新渲染。

但是，根据 documentation ，难道不应该像已经写好的那样直接通过吗？

Answer 1

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

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