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.

Practice

1. What is the main purpose of mounting a Vue component in Cypress tests?

easy

A. To deploy the component to production

B. To create a new Vue component from scratch

C. To write CSS styles for the component

D. To test the component in isolation without the full app

Solution

1. Step 1: Understand mounting in testing context

   Mounting means loading a component alone to test its behavior without other app parts.

2. Step 2: Identify the purpose of mounting in Cypress

   Cypress mounts Vue components to isolate and test them independently.

3. Final Answer:

   To test the component in isolation without the full app -> Option D

4. Quick Check:

   Mounting = isolated component test [OK]

Hint: Mount means test component alone, not full app [OK]

Common Mistakes:

• Confusing mounting with deployment
• Thinking mounting creates components
• Mixing mounting with styling

2. Which of the following is the correct syntax to mount a Vue component named MyButton in Cypress?

easy

A. cy.mount(MyButton)

B. mount.cy(MyButton)

C. cy.component(MyButton)

D. mountComponent(MyButton)

Solution

1. Step 1: Recall Cypress Vue mounting syntax

   The official Cypress command to mount Vue components is cy.mount().

2. Step 2: Check each option's syntax

   Only cy.mount(MyButton) matches the correct Cypress syntax.

3. Final Answer:

   cy.mount(MyButton) -> Option A

4. Quick Check:

   Correct mount syntax = cy.mount() [OK]

Hint: Use cy.mount() to mount Vue components in Cypress [OK]

Common Mistakes:

• Swapping method and object order
• Using non-existent commands like cy.component
• Confusing mount with other Cypress commands

3. Given this test code, what will the assertion check?

cy.mount(MyButton, { props: { label: 'Click me' } })
cy.get('button').should('contain.text', 'Click me')

medium

A. The button contains the text 'Click me'

B. The button is disabled

C. The button has no text

D. The button has a CSS class named 'Click me'

Solution

1. Step 1: Understand the mounted component props

   The component is mounted with a prop label set to 'Click me'.

2. Step 2: Analyze the assertion

   The test checks if the button element contains the text 'Click me'.

3. Final Answer:

   The button contains the text 'Click me' -> Option A

4. Quick Check:

   Prop label sets button text = 'Click me' [OK]

Hint: Props set text, assertion checks button text content [OK]

Common Mistakes:

• Confusing text content with CSS classes
• Assuming button is disabled without code
• Ignoring the prop passed to component

4. Identify the error in this Cypress test code for mounting a Vue component:

cy.mount(MyButton, { props: { label: Click me } })
cy.get('button').should('contain.text', 'Click me')

medium

A. The assertion uses wrong method should('text')

B. The prop value Click me is not quoted as a string

C. The selector 'button' is invalid

D. The mount command is missing parentheses

Solution

1. Step 1: Check prop syntax

   The prop value Click me is missing quotes, so it's treated as an undefined variable.

2. Step 2: Verify other parts

   Mount syntax and selector are correct; assertion method is valid.

3. Final Answer:

   The prop value Click me is not quoted as a string -> Option B

4. Quick Check:

   Prop strings must be quoted [OK]

Hint: Always quote string prop values in mount options [OK]

Common Mistakes:

• Forgetting quotes around string props
• Misusing assertion methods
• Using invalid selectors

5. You want to test a Vue component AlertBox that accepts a slot for custom message content. Which is the correct way to mount it with a slot containing <p>Warning!</p> in Cypress?

hard

A. cy.mount(AlertBox, { slot: 'Warning!' })

B. cy.mount(AlertBox, { props: { default: 'Warning!' } })

C. cy.mount(AlertBox, { slots: { default: 'Warning!' } })

D. cy.mount(AlertBox, { children: 'Warning!' })

Solution

1. Step 1: Understand slot passing in Cypress mount

   Slots are passed using the slots option with keys for slot names.

2. Step 2: Check each option

   Only cy.mount(AlertBox, { slots: { default: '

   Warning!

   ' } }) correctly uses slots: { default: '

   Warning!

   ' } syntax.

3. Final Answer:

   cy.mount(AlertBox, { slots: { default: '<p>Warning!</p>' } }) -> Option C

4. Quick Check:

   Slots passed via slots object [OK]

Hint: Use slots: { default: '<html>' } to pass slot content [OK]

Common Mistakes:

• Passing slot content as props
• Using wrong option names like slot or children
• Not wrapping slot content in slots object