Vue Test Utils - data does not update after triggering click event

Question

I have this basic test using 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')
})

The test only passes if I either

don't send any custom data to the mount method, or
force a re-render, using wrapper.vm.$forceUpdate() after triggering the event.

However, according to the documentation, shouldn't it just pass as it is already written?

Ajeesh Sathyan · Accepted Answer · 2022-04-14 07:27:42Z

2

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

const sleep = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

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')
  await wrapper.vm.$nextTick();
  await sleep(2000);
  expect(wrapper.html()).toContain('Count: 1')
})

answered Apr 14, 2022 at 7:27

Ajeesh Sathyan

3472 gold badges5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mk_xt · Accepted Answer · 2020-12-28 19:18:50Z

1

The test is fine, in vue2 you have to add a root to the template. Component template should contain exactly one root element.

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

answered Dec 28, 2020 at 19:18

mk_xt

5811 gold badge4 silver badges6 bronze badges

Collectives™ on Stack Overflow

Vue Test Utils - data does not update after triggering click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related