Mounting React components in Cypress

Introduction

Mounting React components lets you test them in a real browser environment. It helps you check if the component works as expected when used in an app.

You want to test how a React button behaves when clicked.

You need to check if a form component shows error messages correctly.

You want to verify that a list component renders all items properly.

You want to test component interaction with user input.

You want to catch bugs before releasing your React app.

Syntax

Cypress

import { mount } from 'cypress/react';

mount(<YourComponent prop1={value1} />);

Use mount() to render your React component inside Cypress.

Pass your component as JSX inside mount().

Examples

This mounts a simple Button component with a label prop.

Cypress

import { mount } from 'cypress/react';
import Button from './Button';

mount(<Button label="Click me" />);

This mounts a Form component without props to test its default behavior.

Cypress

import { mount } from 'cypress/react';
import Form from './Form';

mount(<Form />);

Sample Program

This test mounts a simple Hello component and checks if it shows the correct greeting.

Cypress

import { mount } from 'cypress/react';
import React from 'react';

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

describe('Hello component', () => {
  it('shows greeting with name', () => {
    mount(<Hello name="Alice" />);
    cy.contains('Hello, Alice!').should('be.visible');
  });
});

Important Notes

Always import mount from cypress/react to mount React components.

Use Cypress commands like cy.contains() to check what the component renders.

Mounting helps test components isolated from the full app.

Summary

Mount React components in Cypress using mount().

This lets you test component rendering and behavior in a browser.

Use assertions to check if the component shows expected content.

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