Answer
Cypress Component Testing vs E2E Testing
Key Difference
| E2E Testing | Component Testing | |
|---|---|---|
| What it tests | Full user flows in real browser | Individual UI components in isolation |
| Requires | Running server + URL | No server needed |
| Speed | Slower (full app) | Fast (one component) |
| Use case | Login flow, checkout, navigation | Button, form, modal, card |
cy.visit() | Yes | No — use cy.mount() |
E2E Test (Full App)
JavaScript
// cypress/e2e/login.cy.js
it('should login and reach dashboard', () => {
cy.visit('/login') // real server
cy.get('#email').type('user@test.com')
cy.get('#password').type('pass123')
cy.get('[data-testid="login-btn"]').click()
cy.url().should('include', '/dashboard') // real navigation
})
Component Test (Isolated Component)
JavaScript
// cypress/component/LoginForm.cy.jsx
import LoginForm from '../../src/components/LoginForm'
describe('LoginForm Component', () => {
it('should render and submit form', () => {
const onSubmit = cy.stub().as('submitFn')
// Mount the component directly — no server
cy.mount(<LoginForm onSubmit={onSubmit} />)
cy.get('[data-testid="email"]').type('user@test.com')
cy.get('[data-testid="password"]').type('pass123')
cy.get('[data-testid="login-btn"]').click()
// Verify stub was called
cy.get('@submitFn').should('have.been.calledWith', {
email: 'user@test.com',
password: 'pass123',
})
})
it('should disable button when fields empty', () => {
cy.mount(<LoginForm onSubmit={cy.stub()} />)
cy.get('[data-testid="login-btn"]').should('be.disabled')
})
})
Setup for Component Testing
JavaScript
// cypress.config.js
const { defineConfig } = require('cypress')
const { devServer } = require('@cypress/vite-dev-server') // or webpack
module.exports = defineConfig({
component: {
devServer: {
framework: 'react', // or 'vue', 'angular', 'svelte'
bundler: 'vite', // or 'webpack'
},
specPattern: 'cypress/component/**/*.cy.{js,jsx,ts,tsx}',
},
})
When to Use Which
- ✓Component tests: Test a single component in isolation (button states, form validation, error messages)
- ✓E2E tests: Test full user workflows (registration flow, checkout, authentication)
- ✓Best practice: Use BOTH — component tests for component logic, E2E for critical user paths