How to Use Cypress Component Testing: Syntax, Example, and Tips

To use Cypress component testing, first install Cypress and configure it for component testing by setting the component testing framework in cypress.config.js. Then write tests that mount your UI components using mount() and assert their behavior in isolation.

Syntax

The basic syntax for Cypress component testing involves importing your component and using mount() to render it inside the test. You then use Cypress commands to interact with and assert on the component.

• import Component from './Component': Import the UI component to test.
• mount(<Component />): Render the component in the test browser.
• cy.get(selector): Select elements inside the mounted component.
• .should(): Assert expected behavior or content.

javascript

import MyButton from './MyButton'

import { mount } from 'cypress/react'

describe('MyButton component', () => {
  it('renders and responds to click', () => {
    mount(<MyButton label="Click me" />)
    cy.get('button').should('contain.text', 'Click me')
    cy.get('button').click()
    cy.get('button').should('have.class', 'clicked')
  })
})

Example

This example shows a simple React button component test using Cypress component testing. It mounts the button, checks its label, clicks it, and verifies a class change.

javascript

import React, { useState } from 'react'

function MyButton({ label }) {
  const [clicked, setClicked] = useState(false)
  return (
    <button className={clicked ? 'clicked' : ''} onClick={() => setClicked(true)}>
      {label}
    </button>
  )
}

// Test file
import { mount } from 'cypress/react'

describe('MyButton component', () => {
  it('renders and changes class on click', () => {
    mount(<MyButton label="Click me" />)
    cy.get('button').should('contain.text', 'Click me')
    cy.get('button').click()
    cy.get('button').should('have.class', 'clicked')
  })
})

Output

Test passes if button text is 'Click me' and button has 'clicked' class after click

Common Pitfalls

Common mistakes when using Cypress component testing include:

• Not configuring cypress.config.js for component testing mode.
• Forgetting to import mount from cypress/react or the correct adapter.
• Using global selectors that do not target the mounted component's scope.
• Not waiting for component state changes before asserting.

Always ensure your test environment is set up for component testing and use scoped selectors.

javascript

/* Wrong: Missing mount import and config */
describe('Button test', () => {
  it('fails to mount', () => {
    cy.mount(<Button />) // Error: cy.mount is not a function
  })
})

/* Right: Proper import and usage */
import { mount } from 'cypress/react'
describe('Button test', () => {
  it('mounts correctly', () => {
    mount(<Button />)
    cy.get('button').should('exist')
  })
})

Quick Reference

Step	Description
Install Cypress	npm install cypress --save-dev
Configure component testing	Set component in cypress.config.js
Import mount	import { mount } from 'cypress/react'
Write test	Use mount(<Component />) and Cypress commands
Run tests	Use npx cypress open --component

Key Takeaways

Configure Cypress for component testing in cypress.config.js before writing tests.

Use mount() to render components inside your tests for isolated UI testing.

Import mount from the correct Cypress adapter like cypress/react for React components.

Use scoped selectors and wait for state changes before asserting component behavior.

Run component tests with npx cypress open --component for an interactive experience.