Component test setup in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of a component test setup in Cypress?

To prepare the environment and render the component so tests can interact with it in isolation.

beginner

Which Cypress command is commonly used to mount a component for testing?

The cy.mount() command is used to render a component in the test environment.

intermediate

Why should component tests avoid relying on external services during setup?

To keep tests fast, reliable, and focused only on the component's behavior without outside interference.

intermediate

What is a good practice for organizing component test setup code in Cypress?

Use beforeEach() hooks to set up common rendering or state before each test runs.

beginner

How can you pass props or inputs to a component during Cypress test setup?

By providing props as arguments inside the cy.mount() call, e.g., cy.mount(<MyComponent prop1={value} />).

Which command is used to render a component in Cypress component tests?

A cy.mount()

B cy.visit()

C cy.render()

D cy.load()

cy.mount() is the correct command to render components in Cypress component testing.

Where should you place common setup code for component tests in Cypress?

A Inside <code>it()</code> block only

B Inside <code>afterEach()</code> hook

C Inside <code>beforeEach()</code> hook

D Inside <code>describe()</code> block only

beforeEach() runs before every test, making it ideal for common setup.

Why is it important to isolate components during test setup?

A To skip rendering the component

B To test the whole application at once

C To depend on external APIs

D To make tests faster and more reliable

Isolating components avoids outside interference, improving speed and reliability.

How do you pass props to a component in Cypress component tests?

A Inside the <code>cy.mount()</code> call as JSX props

B Using <code>cy.visit()</code> URL parameters

C By setting environment variables

D By modifying global state only

Props are passed directly in JSX inside cy.mount().

Which of the following is NOT recommended during component test setup?

A Mocking external services

B Relying on real backend APIs

C Using <code>beforeEach()</code> for setup

D Rendering the component with <code>cy.mount()</code>

Relying on real backend APIs can make tests slow and flaky; mocking is preferred.

Explain the steps to set up a component test in Cypress from scratch.

Think about how you prepare the component and environment before running tests.

Describe why isolating a component during test setup improves test quality.

Consider how external factors affect test results.