What is proper way to verify testing for vue component?

[dante01yoon]

greetings, vuex, pinia supports documentation how to verify state updates,
also internal state inside SFC can be verified through vue test utils

 it('Up arrow key increments quantity by 1', async () => {
    const wrapper = mount(QuantityComponent)
    await wrapper.trigger('keydown.up')
    expect(wrapper.vm.quantity).toBe(1)
  })

My question is, is it worthwhile testing state, rather than UI presentation through dom text?
we can access data through vm instance, but it feels like testing implementation details, and want to discuss should we avoid verify like this ?

[aniruddhaadak80]

Hey @dante01yoon ,

When testing Vue components, it's usually better to focus on how the component looks and behaves in the UI rather than checking the internal state directly.

Testing what users see (like text in the DOM) reflects their experience and is more reliable. While checking the internal state can help with complex logic, it often leads to tests that are tightly linked to how the component is built. Aim to test user interactions and visible results for stronger, easier-to-maintain tests.

Thanks .