Mounting React components in Cypress - Framework Patterns

Framework Mode - Mounting React components

Folder Structure

cypress/
├── e2e/                  # End-to-end test specs
│   └── example.cy.js     # Example e2e test
├── component/            # Component test specs
│   └── Button.cy.jsx     # React component mount test
├── support/              # Support files and commands
│   ├── commands.js       # Custom Cypress commands
│   └── component.js      # Setup for component testing
cypress.config.js         # Cypress configuration file
package.json             # Project dependencies and scripts

Test Framework Layers

• Component Tests: Located in cypress/component/, these tests mount React components using cy.mount() and verify UI and behavior in isolation.
• Support Layer: cypress/support/component.js sets up the React mounting environment and imports necessary adapters.
• Custom Commands: cypress/support/commands.js can extend Cypress with reusable commands for mounting or interacting with components.
• Configuration: cypress.config.js defines component testing settings like viewport size, base URL, and test files location.
• End-to-End Tests: In cypress/e2e/, separate from component tests, for full app flows.

Configuration Patterns

• cypress.config.js: Configure component testing with React framework support, specify test files pattern cypress/component/**/*.cy.{js,jsx,ts,tsx}.
• Environment Variables: Use env in config or CYPRESS_ prefixed variables for credentials or API URLs.
• Browser Settings: Set viewport size and browser launch options in config for consistent component rendering.
• Setup Files: Import React and ReactDOM adapters in cypress/support/component.js to enable cy.mount() for React components.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports of component test runs.
• CI/CD: Run cypress run --component in CI pipelines to execute component tests headlessly.
• Artifacts: Save screenshots and videos on test failures for debugging UI issues in components.
• Parallelization: Use Cypress Dashboard service or self-hosted solutions to parallelize component tests for faster feedback.

Best Practices

1. Isolate Components: Mount one React component per test to keep tests focused and fast.
2. Use Custom Commands: Create reusable cy.mount() wrappers for common component setups.
3. Mock Dependencies: Stub network calls or context providers to test components in isolation.
4. Keep Tests Small: Test UI and behavior in small units rather than large integrated flows.
5. Separate Component and E2E Tests: Organize tests by purpose to improve maintainability and clarity.

Self Check

Where in this folder structure would you add a new test file to mount and test a React LoginForm component?

Key Result

Organize Cypress component tests under cypress/component with dedicated support setup and config for React mounting.