Mounting React components in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a React component named using Cypress.

Cypress

cy.[1](<MyComponent />);

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

Aclick

Brender

Cmount

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.visit() instead of cy.mount()

Trying to use cy.render() which is not a Cypress command

Using cy.click() which is for user interactions

Use mount to render React components in Cypress tests.

2fill in blank

medium

Complete the code to import the mount function from the correct Cypress React package.

Cypress

import { [1] } from '@cypress/react';

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

Amount

Brender

Cvisit

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Importing render instead of mount

Trying to import visit which is not from this package

Using click which is unrelated

The mount function is imported from @cypress/react to mount React components.

3fill in blank

hard

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

Cypress

cy.mount(<MyComponent [1]=[2] />);

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

Atitle

B"Hello"

DHello

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props without quotes around string values

Using unquoted values causing syntax errors

Using incorrect prop names

Props must be passed as propName="value" or propName={'value'}. Here, title="Hello" is correct.

4fill in blank

hard

Fill both blanks to mount a component and check if a button with text 'Submit' exists.

Cypress

cy.mount(<MyForm />);
cy.get('button').[1]('[2]');

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

Acontains

Bclick

CSubmit

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using click instead of contains to find elements

Using type which is for input fields

Searching for wrong text

Use contains to find an element with specific text. Here, cy.get('button').contains('Submit') checks for the button.

5fill in blank

hard

Fill all three blanks to mount a component with a prop, then check if a heading contains the prop text.

Cypress

cy.mount(<Greeting [1]=[2] />);
cy.get('h1').[3]('Hello');

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

Aname

B"Alice"

Ccontains

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting string prop values

Using click instead of contains

Using wrong prop names

The component is mounted with prop name="Alice". Then cy.get('h1').contains('Hello') checks the heading text.

Practice

1. What is the main purpose of using mount() in Cypress when testing React components?

easy

A. To create mock data for API responses

B. To render the React component inside the Cypress test runner for testing

C. To send HTTP requests to the backend server

D. To compile React components into production code

Solution

1. Step 1: Understand the role of mount() in Cypress

   mount() is used to render React components inside the Cypress test environment so you can interact with and test them.

2. Step 2: Compare other options

   Sending HTTP requests, creating mock data, and compiling code are unrelated to mounting components in Cypress.

3. Final Answer:

   To render the React component inside the Cypress test runner for testing -> Option B

4. Quick Check:

   mount() renders React components for testing [OK]

Hint: mount() renders components in Cypress for testing [OK]

Common Mistakes:

• Confusing mount() with API mocking
• Thinking mount() compiles code
• Using mount() to send HTTP requests

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

easy

A. cy.mount();

B. mount('MyButton');

C. cy.mount('MyButton');

D. mount(<MyButton>);

Solution

1. Step 1: Recall correct mount syntax

   The correct way to mount a React component is to call cy.mount() with the component JSX, like cy.mount(<MyButton />);.

2. Step 2: Identify syntax errors in other options

   mount('MyButton'); uses a string instead of JSX. cy.mount('MyButton'); uses cy.mount but passes a string, which is incorrect. mount(<MyButton>); misses the closing slash in JSX, causing syntax error.

3. Final Answer:

   cy.mount(<MyButton />); -> Option A

4. Quick Check:

   Use cy.mount() with JSX component [OK]

Hint: Use cy.mount() with JSX, not strings [OK]

Common Mistakes:

• Passing component name as string instead of JSX
• Missing closing slash in JSX
• Calling mount() without cy.

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

import { mount } from 'cypress/react';

function Greeting() {
  return <h1>Hello, Cypress!</h1>;
}

describe('Greeting component', () => {
  it('shows greeting text', () => {
    mount(<Greeting />);
    cy.get('h1').should('contain.text', 'Hello, Cypress!');
  });
});

medium

A. It verifies the component is not rendered

B. It checks if the component has a button element

C. It checks if the h1 element contains the text 'Hello, Cypress!'

D. It tests if the h1 element is empty

Solution

1. Step 1: Understand the test code

   The test mounts the Greeting component, which renders an h1 with text 'Hello, Cypress!'.

2. Step 2: Analyze the assertion

   The assertion uses cy.get('h1').should('contain.text', 'Hello, Cypress!') which checks if the h1 contains that exact text.

3. Final Answer:

   It checks if the h1 element contains the text 'Hello, Cypress!' -> Option C

4. Quick Check:

   Assertion checks h1 text content [OK]

Hint: Look at cy.get selector and should() text check [OK]

Common Mistakes:

• Confusing element types in assertion
• Assuming test checks for buttons
• Thinking assertion checks for absence

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

import { mount } from 'cypress/react';

function Button() {
  return <button>Click me</button>;
}

describe('Button component', () => {
  it('renders button', () => {
    mount(Button);
    cy.get('button').should('exist');
  });
});

medium

A. The component should be passed as JSX: mount(<Button />)

B. The import statement is missing curly braces

C. The assertion should check for text, not existence

D. The function Button should return a div, not button

Solution

1. Step 1: Check how the component is mounted

   The code calls mount(Button) but it should pass JSX: mount(<Button />) to render the component.

2. Step 2: Verify other parts

   The import is correct with curly braces. Checking existence is valid. Returning a button is fine.

3. Final Answer:

   The component should be passed as JSX: mount(<Button />) -> Option A

4. Quick Check:

   Pass JSX to mount() [OK]

Hint: Always use JSX syntax inside mount() [OK]

Common Mistakes:

• Passing component function instead of JSX
• Changing import syntax unnecessarily
• Confusing assertion purpose

5. You want to test a React component UserCard that receives a name prop and displays it inside a span. Which is the correct way to mount it in Cypress and assert the name is shown?

function UserCard({ name }) {
  return <span>User: {name}</span>;
}

hard

A. cy.mount(<UserCard name="Alice" />); cy.get('span').should('contain.text', 'User: Alice');

B. cy.mount(UserCard, { props: { name: 'Alice' } }); cy.get('span').should('contain.text', 'Alice');

C. mount(<UserCard name='Alice' />); cy.get('span').should('have.text', 'User: Alice');

D. cy.mount(<UserCard name='Alice' />); cy.get('span').should('have.text', 'User: Alice');

Solution

1. Step 1: Mount the component with correct syntax and props

   Use cy.mount(<UserCard name='Alice' />) to mount the component with the prop.

2. Step 2: Assert the exact text inside the span

   Use should('have.text', 'User: Alice') to check the full text content matches exactly.

3. Step 3: Why other options fail

   The option with cy.mount(<UserCard name="Alice" />) and contain.text('User: Alice') uses substring check instead of exact text match.
   The option with cy.mount(UserCard, { props: { name: 'Alice' } }) uses invalid React mount syntax.
   The option with mount(<UserCard name='Alice' />) misses cy. prefix.

4. Final Answer:

   cy.mount(<UserCard name='Alice' />); cy.get('span').should('have.text', 'User: Alice'); -> Option D

5. Quick Check:

   Use cy.mount() with JSX and exact text assertion [OK]

Hint: Use cy.mount() with JSX and exact text check [OK]

Common Mistakes:

• Omitting cy. before mount()
• Using wrong mount() signature
• Using contain.text instead of have.text for exact match