Fixture-based response mocking in Cypress - Framework Patterns

Framework Mode - Fixture-based response mocking

Folder Structure

cypress/
├── e2e/                  # Test specs
│   └── example.cy.js     # Example test file
├── fixtures/             # Static JSON files for mocking responses
│   └── user.json         # Sample user data
├── support/              # Custom commands and utilities
│   ├── commands.js       # Custom Cypress commands
│   └── e2e.js            # Support file loaded before tests
cypress.config.js         # Cypress configuration file

Test Framework Layers

• Fixtures Layer: Contains JSON files with static mock data to simulate API responses.
• Support Layer: Holds reusable commands and utilities to intercept network calls and apply mocks.
• Test Layer: Test scripts in cypress/e2e that use fixtures to stub responses during test runs.
• Configuration Layer: Central place to manage environment variables, base URLs, and test settings.

Configuration Patterns

• cypress.config.js: Define baseUrl and environment variables for different environments (dev, staging, prod).
• Fixtures Usage: Load fixture files using cy.fixture() inside tests or support commands.
• Intercept Setup: Use cy.intercept() with fixture data to mock API responses dynamically.
• Environment Switching: Use --env flag or config files to switch between real and mocked APIs.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests headlessly with mocked responses for fast, reliable runs.
• Store test artifacts and reports for review after CI runs.
• Use environment variables in CI to toggle between mocking and live API testing.

Best Practices

1. Keep fixtures small and focused: Each fixture file should represent a single API response or data set.
2. Use descriptive fixture names: Name files clearly to reflect the API or data they mock (e.g., user.json, products.json).
3. Centralize intercept logic: Put common intercept commands in cypress/support/commands.js to reuse across tests.
4. Combine fixtures with dynamic stubbing: Modify fixture data in tests if needed to cover different scenarios.
5. Keep tests independent: Each test should set up its own mocks to avoid cross-test interference.

Self Check

Where in this folder structure would you add a new fixture file to mock the API response for a login request?

Key Result

Use fixture files in the fixtures folder combined with cy.intercept() to mock API responses for reliable and fast Cypress tests.