Mounting React components in Cypress - Framework Patterns

Framework Mode - Mounting React components

Folder Structure

cypress/
├── e2e/                  # End-to-end test specs
│   └── example.cy.js     # Example e2e test
├── component/            # Component test specs
│   └── Button.cy.jsx     # React component mount test
├── 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 React components using cy.mount() and verify UI and behavior in isolation.
• Support Layer: cypress/support/component.js sets up the React mounting environment and imports necessary adapters.
• Custom Commands: cypress/support/commands.js can extend Cypress with reusable commands for mounting or interacting with components.
• Configuration: cypress.config.js defines component testing settings like viewport size, base URL, and test files location.
• End-to-End Tests: In cypress/e2e/, separate from component tests, for full app flows.

Configuration Patterns

• cypress.config.js: Configure component testing with React framework support, specify test files pattern cypress/component/**/*.cy.{js,jsx,ts,tsx}.
• Environment Variables: Use env in config or CYPRESS_ prefixed variables for credentials or API URLs.
• Browser Settings: Set viewport size and browser launch options in config for consistent component rendering.
• Setup Files: Import React and ReactDOM adapters in cypress/support/component.js to enable cy.mount() for React components.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports of component test runs.
• CI/CD: Run cypress run --component in CI pipelines to execute component tests headlessly.
• Artifacts: Save screenshots and videos on test failures for debugging UI issues in components.
• Parallelization: Use Cypress Dashboard service or self-hosted solutions to parallelize component tests for faster feedback.

Best Practices

1. Isolate Components: Mount one React component per test to keep tests focused and fast.
2. Use Custom Commands: Create reusable cy.mount() wrappers for common component setups.
3. Mock Dependencies: Stub network calls or context providers to test components in isolation.
4. Keep Tests Small: Test UI and behavior in small units rather than large integrated flows.
5. Separate Component and E2E Tests: Organize tests by purpose to improve maintainability and clarity.

Self Check

Where in this folder structure would you add a new test file to mount and test a React LoginForm component?

Key Result

Organize Cypress component tests under cypress/component with dedicated support setup and config for React mounting.

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