cypress component testing mount renders blank: how to debug

TL;DR

A blank mount means the component rendered without its context: missing providers, missing global styles, or the dev server not serving the mount. Wrap the mount with the providers the component needs, import the global styles in the component support file, and verify the dev server started. The component then renders as it does in the app.

Error

cypress component testing mount renders blank: how to debug

Cypress component test opens and mount() returns, but the page is blank with no errors.

Steps

1. Check the obvious: open the test in headed mode and look at the DOM. Expected output: you see whether it is truly empty or just unstyled.
2. Add the providers the component needs (router, store, theme) around the mount call. Expected output: the component renders its content.
3. Import global stylesheets in the component support file if the component depends on them. Expected output: styled output matching the app.
4. Verify the component dev server actually started and serves the mount (check the Cypress terminal output). Expected output: no dev-server errors, mount request succeeds.
5. Bisect: mount a trivial component; if it renders, add back complexity until it goes blank. Expected output: you isolate the exact missing piece.

When to use

• mount() shows a blank page in component tests.
• Component tests render but look wrong.
• Setting up Cypress component testing fresh.

When not to use

• mount() throws an error (read the error; the component is broken).
• E2E tests show blank pages (that is app routing, not mount).
• The component renders but interactions fail (event handling issue).

Variant phrasings

Styles missing in component tests

Component tests do not load the app shell; global CSS must be imported explicitly in the support file.

Router provider needed

Components using routing hooks render blank without a router context; wrap with a memory router in the mount.

Blank only in CI

The dev server can lose a startup race in CI; wait for the ready signal before running specs.

Why it happens

Component testing mounts the component in isolation, outside the app shell that normally provides context, styles, and routing. Anything the component implicitly relied on from the shell is missing, and the most common symptom is a silently blank render.

Edge cases

• A component that reads window globals set by the app shell will render blank; stub those globals in the support file.
• Async data fetching in the component needs its mocks wired before mount, or the first render is empty.
• StrictMode double-rendering can surface blank flashes that are not real failures; assert after the settled render.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstulkM8W1sAbS4ND8f_0flQ