Component testing vs E2E in Cypress

Introduction

Component testing checks small parts of an app alone. E2E testing checks the whole app working together. Both help find bugs early and keep apps working well.

When you want to test a single button or form works correctly by itself.

When you want to check if a user can complete a full signup process from start to finish.

When you want to quickly find bugs in a small part without running the whole app.

When you want to make sure all parts of the app work together as expected.

When you want to test user flows like logging in, adding items to cart, and checking out.

Syntax

Cypress

Component Test Example:
cy.mount(<MyButton />)
cy.get('button').click()
cy.get('button').should('contain', 'Clicked')

E2E Test Example:
cy.visit('/login')
cy.get('input[name=email]').type('[e-mail]')
cy.get('input[name=password]').type('password123')
cy.get('button[type=submit]').click()
cy.url().should('include', '/dashboard')

Component tests use cy.mount() to load just one part.

E2E tests use cy.visit() to open full pages like a user.

Examples

This component test checks the login form alone works without errors.

Cypress

cy.mount(<LoginForm />)
cy.get('input[name=username]').type('testuser')
cy.get('button').click()
cy.get('.error').should('not.exist')

This E2E test simulates a user signing up and checks they reach the welcome page.

Cypress

cy.visit('/signup')
cy.get('input[name=email]').type('[e-mail]')
cy.get('input[name=password]').type('mypassword')
cy.get('button[type=submit]').click()
cy.url().should('include', '/welcome')

Sample Program

The component test mounts a button and checks it changes text on click. The E2E test visits the login page, fills the form, submits, and checks the URL changes to dashboard.

Cypress

// Component Test
import MyButton from './MyButton'

describe('MyButton Component', () => {
  it('shows clicked text after click', () => {
    cy.mount(<MyButton />)
    cy.get('button').click()
    cy.get('button').should('contain', 'Clicked')
  })
})

// E2E Test
describe('Login Flow', () => {
  it('logs in user successfully', () => {
    cy.visit('/login')
    cy.get('input[name=email]').type('[e-mail]')
    cy.get('input[name=password]').type('password123')
    cy.get('button[type=submit]').click()
    cy.url().should('include', '/dashboard')
  })
})

Important Notes

Component tests run faster because they test small parts only.

E2E tests cover full user journeys but take longer to run.

Use component tests for quick checks and E2E tests for full app confidence.

Summary

Component testing checks small parts alone.

E2E testing checks the whole app working together.

Both help catch bugs and improve app quality.