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.

Practice

1. What is the main purpose of testing props in a Vue component?

easy

A. To check if the component receives the correct data from its parent

B. To verify the component's internal state changes

C. To ensure the component renders without errors

D. To test the component's CSS styles

Solution

1. Step 1: Understand what props are in Vue

   Props are how a parent component passes data to a child component.

2. Step 2: Identify the goal of testing props

   Testing props ensures the child component receives the right data as expected.

3. Final Answer:

   To check if the component receives the correct data from its parent -> Option A

4. Quick Check:

   Props test data passing = C [OK]

Hint: Props test data input from parent component [OK]

Common Mistakes:

• Confusing props testing with state testing
• Thinking props test styles or rendering only
• Assuming props test event emissions

2. Which Vue Test Utils method is used to check if an event was emitted by a component?

easy

A. trigger()

B. props()

C. emitted()

D. setData()

Solution

1. Step 1: Recall Vue Test Utils methods for events

   The method emitted() returns an object of events emitted by the component.

2. Step 2: Differentiate from other methods

   trigger() simulates DOM events, props() reads props, and setData() changes component data.

3. Final Answer:

   emitted() -> Option C

4. Quick Check:

   Check emitted events = emitted() = B [OK]

Hint: Use emitted() to see events fired by component [OK]

Common Mistakes:

• Using trigger() to check emitted events
• Confusing props() with emitted()
• Trying to use setData() for event checking

3. Given this test code:

const wrapper = mount(MyButton, { props: { label: 'Click' } })
await wrapper.find('button').trigger('click')
const events = wrapper.emitted()

What will events contain if MyButton emits a 'click' event on button click?

medium

A. {}

B. { click: [ 'Click' ] }

C. { click: [ [ 'Click' ] ] }

D. { click: [ [ ] ] }

Solution

1. Step 1: Understand emitted() output format

   emitted() returns an object where keys are event names and values are arrays of argument arrays for each emit.

2. Step 2: Analyze the event emission

   If the component emits 'click' without arguments, emitted().click is an array with empty arrays for each emit.

3. Final Answer:

   { click: [ [ ] ] } -> Option D

4. Quick Check:

   Event emitted without args = empty array inside emitted() = D [OK]

Hint: emitted() returns arrays of argument arrays per event [OK]

Common Mistakes:

• Assuming emitted event has string argument by default
• Confusing emitted() output structure
• Expecting emitted() to return flat arrays

4. What is wrong with this test code snippet?

const wrapper = mount(MyInput, { props: { value: 'test' } })
wrapper.find('input').trigger('input', { target: { value: 'new' } })
expect(wrapper.emitted('input')[0]).toEqual(['new'])

medium

A. trigger() should be awaited because it returns a promise

B. The emitted event name should be 'update:modelValue' instead of 'input'

C. The props should be passed as 'modelValue' not 'value'

D. The event payload should be an event object, not a string

Solution

1. Step 1: Check if trigger() needs awaiting

   In Vue Test Utils, trigger() returns a promise and should be awaited to ensure DOM updates.

2. Step 2: Verify test correctness

   Without await, the emitted event may not be registered before the expect runs, causing test failure.

3. Final Answer:

   trigger() should be awaited because it returns a promise -> Option A

4. Quick Check:

   Always await trigger() for event emission tests [OK]

Hint: Always await trigger() to catch emitted events [OK]

Common Mistakes:

• Not awaiting trigger() causing false negatives
• Mixing up prop names for v-model
• Expecting event payload as object instead of emitted args

5. You want to test a Vue component that emits a 'submit' event only if a prop 'isValid' is true. Which test approach correctly verifies this behavior?

hard

A. Mount component with isValid=true, trigger submit, expect no emitted event; then mount with isValid=false, trigger submit, expect emitted event

B. Mount component with isValid=false, trigger submit, expect no emitted event; then mount with isValid=true, trigger submit, expect emitted event

C. Mount component without props, trigger submit, expect emitted event regardless of isValid

D. Mount component with isValid=true, do not trigger submit, expect emitted event

Solution

1. Step 1: Understand conditional event emission

   The component emits 'submit' only if prop 'isValid' is true, so test must check both true and false cases.

2. Step 2: Design test cases accordingly

   Mount with isValid false and trigger submit to confirm no event; then mount with true and trigger submit to confirm event emitted.

3. Final Answer:

   Mount component with isValid=false, trigger submit, expect no emitted event; then mount with isValid=true, trigger submit, expect emitted event -> Option B

4. Quick Check:

   Test both prop states for conditional event emission [OK]

Hint: Test both true and false prop values for event emission [OK]

Common Mistakes:

• Testing only one prop state
• Expecting event without triggering action
• Ignoring prop effect on event emission