In Vue Test Utils, what does shallowMount actually do to child components, and what can a shallow test no longer check compared with mount?

## Two entry points, one mechanism In **Vue Test Utils 2** (`@vue/test-utils`, for Vue 3) there is only one real mounting function. `shallowMount` is defined as `mount(component, { ...options, shallow: true })`, so everything below applies equally to `shallowMount(Comp)` and `mount(Comp, { shallow: true })`. Vue Test Utils implements stubbing with Vue's `transformVNodeArgs` hook: before each component vnode is created, it looks at the component type and may swap it for a **stub** — a stand-in component. With `shallow: true`, every component vnode below the root is swapped. The root (the component you mounted) is never stubbed, and plain HTML elements are untouched. ## What an automatic stub looks like An automatic stub is generated per child and has four properties that matter in tests: 1. **Its tag** is the child's name, hyphenated, plus `-stub`. A child registered or imported as `UserAvatar` renders `<user-avatar-stub>`. 2. **It copies the child's props declaration**, so the props the parent passes are resolved as props, and `findComponent(UserAvatar).props('size')` returns the real value. For readability, the stub also renders those props as attributes (functions show as `[Function]`). 3. **It runs none of the child's code**: no `setup`, no lifecycle hooks, no fetch in `onMounted`, no template. 4. **It renders no slots** by default. Content the parent places between `<UserAvatar>` tags is simply not rendered. Vue Test Utils also remembers which original each stub stands for, so `findComponent(UserAvatar)` finds the stub by the imported definition. ## Controlling shallow rendering | goal | option | |---|---| | stub every child | `shallow: true` or `shallowMount()` | | keep one child real under shallow | `global: { stubs: { UserAvatar: false } }` | | render default-slot content inside stubs | `global: { renderStubDefaultSlot: true }` | | stub only one child under full mount | `global: { stubs: { UserAvatar: true } }` | `renderStubDefaultSlot` covers the **default slot only**; named and scoped slots are still not rendered by a stub. The guide sets it through `config.global.renderStubDefaultSlot` in hooks, and the mounting option of the same name under `global` does it for one mount. ## What a shallow test cannot check Because the children are empty shells, a shallow test is blind to: - **the children's own output** — text, classes, accessible names rendered by child components; - **slot content you hand to children** — a `<BaseButton>Save</BaseButton>` shows no "Save" under shallow; - **the real event contract** — a stub declares no emits, so nothing checks that the child really emits the event name the parent listens for; - **provide/inject and other runtime collaboration** between parent and child, since the child's setup never runs. What it still checks well: the parent's own markup, which children it chooses to render, with which props, and how it reacts when a child event arrives. ## When each fits - **`mount`** exercises the component the way users meet it and catches integration breaks; it costs more setup (plugins, providers, network mocks for children) and runs slower. - **`shallow`** isolates a parent whose children are expensive or side-effectful, and keeps failures local. The Vue Test Utils guide recommends `mount` plus a targeted `global.stubs` entry when only one or two children are in the way, because the more you stub, the less production-like the test becomes. ```ts const wrapper = mount(ProfileCard, { shallow: true, global: { stubs: { UserName: false } } // keep the one child this test is about }) expect(wrapper.findComponent(UserAvatar).props('size')).toBe(48) expect(wrapper.find('user-avatar-stub').exists()).toBe(true) ``` ## Pitfalls that come up in review - **Asserting on stub attributes instead of props.** `<user-avatar-stub>` prints props as attributes, but objects and arrays print as strings; read them through `findComponent(...).props()`. - **Assuming a stubbed child's side effects happened.** If the parent relies on a child fetching data or emitting on mount, a shallow test will not see it — that code never runs. - **Snapshotting shallow output.** The markup is mostly `-stub` tags, so a snapshot mainly records component names and prop values, and changes whenever a child is renamed. - **Mixing `shallow` with a global stub list.** Entries in `global.stubs` still apply under `shallow`; a custom stub object there wins over the automatic stub, and `false` there is the only way back to a real child.