Mounting Vue components in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a Vue component using Cypress.

Cypress

cy.[1](MyComponent)

Drag options to blanks, or click blank then click option'

Aclick

Brender

Cvisit

Dmount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' instead of 'mount' which is not a Cypress command.

Using 'visit' which is for visiting URLs, not mounting components.

The mount command is used in Cypress to mount Vue components for testing.

2fill in blank

medium

Complete the code to import the mount function from Cypress Vue testing library.

Cypress

import { [1] } from '@cypress/vue'

Drag options to blanks, or click blank then click option'

Aclick

Brender

Cmount

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'render' which is not provided by '@cypress/vue'.

Confusing with 'visit' which is unrelated to component mounting.

The mount function is imported from '@cypress/vue' to mount Vue components in tests.

3fill in blank

hard

Fix the error in the code to correctly mount a Vue component with props.

Cypress

cy.mount(MyComponent, { [1]: { title: 'Hello' } })

Drag options to blanks, or click blank then click option'

Aprops

BpropsData

Cdata

Dattributes

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'propsData' which is Vue Test Utils syntax, not Cypress Vue.

Using 'data' which is for component internal data, not props.

In Cypress Vue testing, props are passed using the props option, not 'propsData'.

4fill in blank

hard

Fill both blanks to mount a Vue component with global plugins and stubs.

Cypress

cy.mount(MyComponent, { global: { [1]: [router], [2]: { 'my-child': true } } })

Drag options to blanks, or click blank then click option'

Aplugins

Bcomponents

Cstubs

Ddirectives

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'components' instead of 'stubs' to replace child components.

Using 'directives' instead of 'plugins' for adding Vue plugins.

The plugins array is used to add Vue plugins like router, and stubs is used to replace child components during mounting.

5fill in blank

hard

Fill all three blanks to mount a Vue component with props, global components, and a directive.

Cypress

cy.mount(MyComponent, { [1]: { count: 5 }, global: { [2]: { Button }, [3]: { focus: focusDirective } } })

Drag options to blanks, or click blank then click option'

Aprops

Bcomponents

Cdirectives

Dstubs

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'stubs' with 'components' when registering global components.

Passing props under 'data' instead of 'props'.

Props are passed with props, global components registered under components, and directives under directives.