Test components in isolation with cy.mount(), cy.intercept(), should() retry-ability, and Vite devServer configuration
0 / 5 completed
1 / 5
What does cy.mount() do in Cypress Component Testing?
cy.mount(): From cypress/react or cypress/vue: cy.mount(<UserCard name="Alice" />). The component renders in an actual browser (Chromium, Firefox, or WebKit). Full Cypress commands work: cy.get('button').click(), cy.contains('Alice'). This gives real browser behaviour — CSS, animations, focus management — unlike jsdom-based test runners.
2 / 5
How does cy.intercept() work in Cypress?
cy.intercept(): Example: cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers'); cy.mount(<UserList />); cy.wait('@getUsers'); cy.get('[data-cy=user-row]').should('have.length', 3). Works in component tests when the component makes network requests. Supports delays, status codes, and dynamic response functions.
3 / 5
What is the difference between Cypress component testing and e2e testing modes?
Component vs e2e: Component tests (CT) use cy.mount() — no server needed, fast feedback on component behaviour. E2E tests use cy.visit('http://localhost:3000') — require the app to be running, test full user journeys. CT is configured in cypress.config.ts with component: { devServer: { framework, bundler } }. Both modes share the same Cypress command API.
4 / 5
How does Cypress's should() command handle assertions on asynchronous DOM updates?
Cypress retry-ability: Cypress commands are queued and execute asynchronously. .should('be.visible') retries the assertion on a 4-second default timeout, re-querying the DOM each attempt. This means cy.get('[data-cy=result]').should('contain.text', 'Success') waits automatically for the component to re-render — no waitFor() or act() needed.
5 / 5
What configuration is required to set up Cypress component testing for a React + Vite project?
CT Vite config:export default defineConfig({ component: { devServer: { framework: 'react', bundler: 'vite' }, specPattern: 'src/**/*.cy.tsx' } }). Cypress launches the Vite dev server internally, so HMR works during interactive component test development. The support file (cypress/support/component.ts) is where you import mount and add it as a Cypress command.