Mounting Vue components in Cypress - Framework Patterns

Framework Mode - Mounting Vue components

Folder Structure

cypress/
├── e2e/                  # End-to-end test specs
│   └── example.cy.js     # Example e2e test
├── component/            # Vue component tests
│   └── MyComponent.cy.js # Test for a Vue component
├── 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 Vue components using @cypress/vue and verify their behavior in isolation.
• Support Layer: cypress/support/component.js sets up the Vue testing environment, imports necessary plugins, and registers global components or mocks.
• Custom Commands: Defined in cypress/support/commands.js to extend Cypress with reusable actions or assertions for Vue components.
• Configuration: cypress.config.js defines environment settings, component testing setup, and browser options.
• End-to-End Tests: In cypress/e2e/, separate from component tests, focusing on full app flows.

Configuration Patterns

• cypress.config.js: Configure component testing with Vue support, specify base URL, and set browser preferences.
• Environment Variables: Use env property in config or CYPRESS_ prefixed variables for credentials or API URLs.
• Global Setup: In cypress/support/component.js, import Vue plugins or mocks needed for all component tests.
• Test Isolation: Each component test mounts components fresh to avoid state leaks.

Test Reporting and CI/CD Integration

• Built-in Cypress Reporter: Shows pass/fail results in the Cypress Test Runner UI during development.
• CI Integration: Run cypress run --component in CI pipelines (GitHub Actions, GitLab CI, Jenkins) to execute component tests headlessly.
• Reporters: Use reporters like mochawesome to generate HTML or JSON reports for component tests.
• Artifacts: Save screenshots and videos on failures for debugging.
• Fail Fast: Configure CI to stop on first failure to save time.

Best Practices

1. Isolate Components: Mount one component per test file to keep tests focused and easy to maintain.
2. Use Realistic Props and Slots: Provide realistic data and slots when mounting to simulate real usage.
3. Mock External Dependencies: Stub APIs or Vuex stores to avoid flaky tests and speed up execution.
4. Leverage Custom Commands: Create reusable commands for common mounting patterns or assertions.
5. Keep Tests Fast and Deterministic: Avoid timers or animations that slow tests or cause flakiness.

Self Check

Where in this folder structure would you add a new test file for a Vue component named LoginForm.vue?

Key Result

Organize Vue component tests under cypress/component with support files for setup and configuration, enabling isolated, fast, and maintainable tests.