Testing props and events in Vue - Performance & Optimization

Performance: Testing props and events

MEDIUM IMPACT

This concept affects the speed and responsiveness of component updates and event handling in Vue applications.

Testing component props and emitted events in Vue

Vue

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

test('good: updates props without remounting', async () => {
  const wrapper = mount(MyComponent, { props: { count: 0 } })
  await wrapper.setProps({ count: 1 })
  expect(wrapper.text()).toContain('1')
  await wrapper.setProps({ count: 2 })
  expect(wrapper.text()).toContain('2')
})

Reusing the same mounted component and updating props avoids unnecessary DOM operations and speeds up tests.

📈 Performance Gainsingle mount, fewer DOM updates, faster test execution

Testing component props and emitted events in Vue

Vue

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

test('bad: tests props by remounting component repeatedly', () => {
  const wrapper = mount(MyComponent, { props: { count: 0 } })
  wrapper.setProps({ count: 1 })
  expect(wrapper.text()).toContain('1')
  wrapper.unmount()
  const wrapper2 = mount(MyComponent, { props: { count: 2 } })
  expect(wrapper2.text()).toContain('2')
})

Remounting the component multiple times causes repeated DOM creation and destruction, increasing test runtime and resource use.

📉 Performance Costblocks test execution longer, triggers multiple full DOM mounts

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Remounting component for each prop change	Multiple mounts/unmounts	Multiple reflows	High paint cost	[X] Bad
Updating props on mounted component	Single mount, prop updates	Minimal reflows	Low paint cost	[OK] Good
Remounting component after event emit	Multiple mounts/unmounts	Multiple reflows	High paint cost	[X] Bad
Emitting event on mounted component	Single mount, event emit	No reflows	Minimal paint cost	[OK] Good

Rendering Pipeline

Testing props and events affects how Vue updates the virtual DOM and triggers real DOM updates during tests.

→Virtual DOM Diffing

→DOM Updates

→Event Handling

⚠️ BottleneckExcessive remounting causes repeated full DOM creation and destruction, which is costly.

Core Web Vital Affected

INP

This concept affects the speed and responsiveness of component updates and event handling in Vue applications.

Optimization Tips

1Avoid remounting components repeatedly during prop or event tests.

2Update props on the same mounted component instance to reduce DOM operations.

3Emit and check events on the mounted component without remounting for faster tests.

Performance Quiz - 3 Questions

What is the main performance issue when remounting a Vue component multiple times during prop testing?

A It causes multiple full DOM mounts and unmounts, slowing tests.

B It reduces the size of the test bundle.

C It improves event handling speed.

D It decreases memory usage.

DevTools: Performance

How to check: Record a test run in the Performance panel, look for multiple 'Recalculate Style' and 'Layout' events caused by repeated mounts.

What to look for: Multiple layout and paint events indicate inefficient remounting; fewer events indicate optimized prop/event testing.