1---
2title: Test Components Using Blackbox Approach - Focus on Behavior Not Implementation
3impact: HIGH
4impactDescription: Implementation-aware tests become brittle and break during refactoring, leading to high maintenance burden
5type: best-practice
6tags: [vue3, testing, component-testing, vitest, vue-test-utils, blackbox]
7---
8 
9# Test Components Using Blackbox Approach - Focus on Behavior Not Implementation
10 
11**Impact: HIGH** - Tests that rely on implementation details (internal state, private methods, component structure) break during refactoring even when functionality remains correct. This leads to false negatives and high test maintenance burden.
12 
13Follow Kent C. Dodds' testing philosophy: "The more your tests resemble how your software is used, the more confidence they can give you."
14 
15## Task Checklist
16 
17- [ ] Test what the component does, not how it does it
18- [ ] Query elements by user-visible attributes (text, role, testid)
19- [ ] Simulate user interactions (click, type) rather than calling methods directly
20- [ ] Assert on rendered output, emitted events, and visible state changes
21- [ ] Avoid accessing component internal state or private methods
22- [ ] Use data-testid attributes for elements without semantic meaning
23 
24**Incorrect:**
25```javascript
26import { mount } from '@vue/test-utils'
27import Counter from './Counter.vue'
28 
29// BAD: Testing implementation details
30test('counter increments', async () => {
31  const wrapper = mount(Counter)
32 
33  // Accessing internal state directly
34  expect(wrapper.vm.count).toBe(0)
35 
36  // Calling internal method instead of simulating user action
37  wrapper.vm.increment()
38 
39  // Checking internal state instead of visible output
40  expect(wrapper.vm.count).toBe(1)
41})
42 
43// BAD: Testing component structure
44test('has increment button', () => {
45  const wrapper = mount(Counter)
46 
47  // Testing implementation detail - what if button becomes an anchor?
48  expect(wrapper.find('button').exists()).toBe(true)
49})
50```
51 
52**Correct:**
53```javascript
54import { mount } from '@vue/test-utils'
55import Counter from './Counter.vue'
56 
57// CORRECT: Testing behavior like a user would
58test('counter displays updated value after clicking increment', async () => {
59  const wrapper = mount(Counter, {
60    props: { max: 10 }
61  })
62 
63  // Assert initial visible state
64  expect(wrapper.find('[data-testid="counter-value"]').text()).toContain('0')
65 
66  // Simulate user action
67  await wrapper.find('[data-testid="increment-button"]').trigger('click')
68 
69  // Assert visible result
70  expect(wrapper.find('[data-testid="counter-value"]').text()).toContain('1')
71})
72 
73// CORRECT: Testing emitted events (public API)
74test('emits change event with new value when incremented', async () => {
75  const wrapper = mount(Counter)
76 
77  await wrapper.find('[data-testid="increment-button"]').trigger('click')
78 
79  expect(wrapper.emitted('change')).toHaveLength(1)
80  expect(wrapper.emitted('change')[0]).toEqual([1])
81})
82```
83 
84## Using @testing-library/vue for Better Blackbox Tests
85 
86```javascript
87import { render, screen, fireEvent } from '@testing-library/vue'
88import Counter from './Counter.vue'
89 
90// Testing Library encourages accessible, user-centric queries
91test('increments counter on button click', async () => {
92  render(Counter)
93 
94  // Query by role - how screen readers see it
95  const button = screen.getByRole('button', { name: /increment/i })
96  const display = screen.getByText('0')
97 
98  await fireEvent.click(button)
99 
100  expect(screen.getByText('1')).toBeInTheDocument()
101})
102```
103 
104## What to Test vs What Not to Test
105 
106### DO Test (Public Interface)
107```javascript
108// Props affect rendered output
109test('shows title from props', () => {
110  const wrapper = mount(Card, {
111    props: { title: 'Hello World' }
112  })
113  expect(wrapper.text()).toContain('Hello World')
114})
115 
116// Slots render correctly
117test('renders slot content', () => {
118  const wrapper = mount(Card, {
119    slots: { default: '<p>Slot content</p>' }
120  })
121  expect(wrapper.text()).toContain('Slot content')
122})
123 
124// Emitted events
125test('emits close event when X clicked', async () => {
126  const wrapper = mount(Modal)
127  await wrapper.find('[data-testid="close-button"]').trigger('click')
128  expect(wrapper.emitted('close')).toBeTruthy()
129})
130```
131 
132### DON'T Test (Implementation Details)
133```javascript
134// Don't test internal computed properties
135// Don't test internal methods
136// Don't test component options/setup internals
137// Don't test that specific child components are rendered (unless critical)
138// Don't rely exclusively on snapshot tests for correctness
139```
140 
141## Reference
142- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)
143- [Vue Test Utils - Testing Philosophy](https://test-utils.vuejs.org/guide/)
144- [Testing Library Guiding Principles](https://testing-library.com/docs/guiding-principles)
145