Props and event testing in Cypress - Framework Patterns

Framework Mode - Props and event testing

Folder Structure

    cypress/
    ├── e2e/                  # Test specs for end-to-end and component tests
    │   ├── components/        # Component tests focusing on props and events
    │   │   └── Button.cy.js   # Example test for a Button component
    │   └── pages/             # Page-level tests
    ├── fixtures/              # Static test data (JSON files)
    ├── support/               # Custom commands and utilities
    │   ├── commands.js        # Custom Cypress commands
    │   └── index.js           # Support file loaded before tests
    ├── plugins/               # Cypress plugins if needed
    └── cypress.config.js      # Main Cypress configuration file
    

Test Framework Layers

• Test Specs (e2e/components): Write tests that mount components, pass props, and simulate events.
• Support Layer: Contains reusable commands to simulate user actions and assert event calls.
• Fixtures: Store test data for props or event payloads to keep tests clean.
• Plugins: Extend Cypress capabilities if needed (e.g., for component testing).
• Configuration: Manage environment settings, base URLs, and test options.

Configuration Patterns

• cypress.config.js: Define baseUrl, component testing setup, and environment variables.
• Environment Variables: Use env property for credentials or flags to toggle event logging.
• Component Testing Setup: Configure component testing with framework adapter (e.g., React).
• Fixtures: Use JSON files to store props data or expected event payloads for reuse.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporter for clear pass/fail results of prop and event tests.
• Integrate with CI tools (GitHub Actions, Jenkins) to run tests on pull requests and merges.
• Generate HTML or JSON reports with mochawesome or similar reporters for detailed insights.
• Fail builds if critical prop or event tests fail to ensure UI components behave correctly.

Best Practices

1. Isolate Components: Test components independently by passing props directly to verify rendering and behavior.
2. Simulate Real User Events: Use Cypress commands like click(), type() to trigger events and assert handlers are called.
3. Use Spies and Stubs: Spy on event handler functions to confirm they are called with correct arguments.
4. Keep Tests Deterministic: Avoid flaky tests by waiting for UI updates and using explicit assertions.
5. Reuse Test Data: Store props and event payloads in fixtures to keep tests clean and maintainable.

Self Check

Where in this folder structure would you add a new test file to verify that a custom Modal component correctly emits a close event when the close button is clicked?

Key Result

Organize Cypress tests by separating component specs, support utilities, fixtures, and configuration to efficiently test props and events.