Slot testing in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Cypress slot test?

Consider a Vue component with a default slot. The Cypress test mounts it and checks the slot content. What will be the test result?

Cypress

cy.mount({
  template: `<MyComponent> <template #default> <p>Slot Content</p> </template> </MyComponent>`,
  components: { MyComponent: { template: `<div><slot></slot></div>` }
  }
})
cy.get('p').should('contain.text', 'Slot Content')

A Test passes because the slot content is rendered and found.

B Test fails because the slot content is not rendered inside the component.

C Test fails with a syntax error due to incorrect template syntax.

D Test passes but the assertion is incorrect and will fail.

💡 Hint

Slots allow passing content into components. The default slot content should render inside the component's tag.

The component uses to render passed content. The test mounts the component with a default slot containing

Slot Content

. The assertion checks for that text and passes.

❓ assertion

intermediate

Which assertion correctly verifies a named slot content in Cypress?

You have a component with a named slot 'header'. Which Cypress assertion correctly checks that the header slot contains the text 'Welcome'?

A cy.get('slot[name="header"]').should('have.text', 'Welcome')

B cy.get('[data-cy=header]').should('contain.text', 'Welcome')

C cy.get('header').should('contain', 'Welcome')

D cy.get('slot').should('contain.text', 'Welcome')

💡 Hint

Use a data attribute to target the slot content container for reliable selection.

Named slots render their content inside elements with a known selector or data attribute. Using data-cy attribute is best practice for stable selectors. Option B correctly targets the container and asserts the text.

🔧 Debug

advanced

Why does this Cypress test fail to detect slot content?

Given this test code, why does the assertion fail to find the slot content?

Cypress

cy.mount({
  template: `<MyComponent></MyComponent>`,
  components: { MyComponent: { template: `<div><slot></slot></div>` } }
})
cy.get('p').should('contain.text', 'Hello Slot')

A The slot content is missing because no slot content was passed during mount.

B The selector 'p' is incorrect and should be 'div'.

C The component template syntax is invalid causing the slot not to render.

D The test runs before the component is mounted, causing a timing issue.

💡 Hint

Slots require content to be passed when mounting the component.

The test mounts the component without passing any slot content, so the slot is empty. The assertion looks for a

with 'Hello Slot' but none exists, so it fails.

❓ framework

advanced

Which Cypress command best tests fallback content in a slot?

A component has a slot with fallback content: Fallback. Which Cypress command verifies the fallback is shown when no slot content is passed?

A cy.mount(MyComponent).get('slot').should('contain.text', 'Fallback')

B cy.mount(MyComponent).get('slot').should('not.exist')

C cy.mount(MyComponent).get('slot').should('have.text', '')

D cy.mount(MyComponent).get('div').should('contain.text', 'Fallback')

💡 Hint

Fallback content renders inside the component's container, not inside the element itself.

The element is replaced by its content or fallback. The fallback text appears inside the component's container element (like a div). So checking the container's text verifies fallback content.

🧠 Conceptual

expert

What is the main challenge when testing scoped slots with Cypress?

Scoped slots pass data from child to parent. What is the main challenge when testing scoped slots in Cypress?

A Selecting the slot element because scoped slots do not render in the DOM.

B Mounting the component because scoped slots require special mount options.

C Accessing and asserting the dynamic slot content that depends on slot props.

D Scoped slots cause Cypress to throw errors due to unsupported syntax.

💡 Hint

Think about how slot props affect the rendered content.

Scoped slots provide data to the slot content, making the rendered content dynamic. Testing requires passing slot props and asserting the resulting dynamic content, which is more complex than static slots.