Mounting React components in Cypress - Build an Automation Script

Mount a simple React Button component and verify its text

Preconditions (2)

Step 1: Import the Button component into the test file

Step 2: Use Cypress mount command to render the Button component with label='Click Me'

Step 3: Find the button element in the mounted component

Step 4: Verify the button's text is exactly 'Click Me'

✅ Expected Result: The Button component mounts successfully and the button displays the text 'Click Me'

Automation Requirements - Cypress with @cypress/react

Assertions Needed:

Verify the button element exists

Verify the button text equals 'Click Me'

Best Practices:

Use cy.mount() from @cypress/react to mount React components

Use semantic selectors like role or text content for locating elements

Keep tests isolated and focused on one component behavior

Avoid using hardcoded CSS selectors that may change

Automated Solution

Cypress

import React from 'react';
import { mount } from '@cypress/react';
import Button from '../../src/components/Button';

describe('Button component mount test', () => {
  it('mounts Button and checks label text', () => {
    mount(<Button label="Click Me" />);
    cy.get('button').should('exist').and('have.text', 'Click Me');
  });
});

The test imports React and the mount function from @cypress/react. It also imports the Button component to test.

Inside the test, mount() renders the Button with the prop label="Click Me". Then, cy.get('button') finds the button element in the mounted component.

The assertions check that the button exists and its text exactly matches 'Click Me'. This confirms the component rendered correctly with the given prop.

This approach uses Cypress best practices: mounting React components directly, using semantic selectors, and clear assertions.

Common Mistakes - 3 Pitfalls

Using cy.visit() to load a page instead of cy.mount() to mount the component

Selecting elements by brittle CSS classes or IDs that may change

{'mistake': 'Not importing the mount function from @cypress/react', 'why_bad': 'Without mount, the test cannot render React components properly.', 'correct_approach': "Always import mount from '@cypress/react' to mount React components in Cypress tests."}

Bonus Challenge

Now add data-driven testing to mount the Button component with 3 different labels and verify each text

Show Hint

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