In Cypress component tests, how do you pass slot or child content to `cy.mount()`?

Props are values a component reads; **projected content** is markup the component wraps. A design-system `Toast` takes a `tone` prop but renders whatever message and action buttons the caller nests inside it. A `DataGrid` takes `rows` but lets the caller supply the empty-state block. React calls that content *children*, Vue calls it *slots*, Angular calls it *content projection* — and `cy.mount()` reaches it through a different channel in each adapter. Getting the channel wrong is a **silent** failure: the component still mounts, the slot is simply empty, and a test that only checks "it rendered" stays green. ## React: children are part of the element There is no separate option. Write the children between the tags, exactly as application code would: ```jsx cy.mount( <Toast tone="success" title="Row saved"> <button data-cy="undo">Undo</button> </Toast> ) ``` The React adapter's second argument holds mount options — `log`, `strict`, `ReactDom` — not content. If you find yourself looking for a `children` key in there, you are writing Vue in React's syntax. ## Vue: the `slots` option `cypress/vue` forwards Vue Test Utils' mounting options, so slot content goes in `slots`, keyed by slot name: ```js cy.mount(Toast, { props: { tone: 'success' }, slots: { default: 'Row saved', action: '<button data-cy="undo">Undo</button>', }, }) ``` Two things to know about that shape: - `default` is the reserved key for the unnamed `<slot />`; every other key must match a `name` attribute in the template. A key that matches nothing is **dropped silently**, which is why the assertion belongs on the rendered text and never on the option you passed. - A slot given as a plain markup string carries no bound handlers. When the projected content itself has to call a spy, supply a render function for that slot, or assert on the event the component emits instead. The JSX form of the same thing passes an object of slot functions as the element's child, which is worth knowing when a spec file already uses JSX for everything else. ## Angular: mount a template string The Angular adapter will mount a template string rather than a component class, and that string is where projected content lives — you write the host markup with the content nested inside it, and pass the inputs and output spies in `componentProperties` alongside. It is the most verbose of the three, and also the most literal: what you write is what gets compiled. ## Choosing what to project | You want to check | What to pass | | --- | --- | | the component renders the caller's message | default slot or a child text node | | named regions land in the right place | one entry per slot name | | an action inside the projected block works | a child element carrying a spy, or the component's own emitted event | | the fallback rendering when nothing is projected | nothing at all — mount with no children | That last row earns its place. A library `Toast` usually has a default rendering for an empty action region, and mounting *without* content is the only way to exercise it. ## Asserting on projected content Once rendered, projected content is ordinary DOM, so the assertions are the usual ones: 1. `cy.contains('[data-cy=toast]', 'Row saved').should('be.visible')` proves the text arrived. 2. `cy.get('[data-cy=toast] [data-cy=undo]').should('exist')` proves *placement* — the descendant selector is what shows the content landed inside the region you meant rather than somewhere else in the tree. 3. `cy.get('[data-cy=undo]').click()` followed by `cy.get('@onUndo').should('have.been.calledOnce')` closes the loop when the projected element carries a spy. Combining both halves — content in, spy out — is what makes a slot test worth writing: it shows the component displays what it was given *and* wires the interaction back to the caller. ## Mistakes worth naming - Passing slot content as a prop because that is the shape the other framework uses. - Trusting a `slots` key that never matched a slot; only an assertion on rendered content catches it. - Expecting an inline handler inside a markup-string slot to fire. - Asserting only that the component mounted, so a slot that quietly vanished still passes. - Projecting a whole page fragment when a single element would have proved the same wiring.