Why component testing isolates UI units in Cypress - Test Execution Impact

Test Overview

This test checks that a UI component renders correctly by itself without depending on other parts of the app. It verifies that the component shows the expected text and reacts to a button click.

Test Code - Cypress

Cypress

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

function Greeting() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello, User!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)} aria-label="increment-button">Click me</button>
    </div>
  );
}

describe('Greeting component test', () => {
  it('renders and updates count on button click', () => {
    mount(<Greeting />);
    cy.get('h1').should('contain.text', 'Hello, User!');
    cy.get('p').should('contain.text', 'You clicked 0 times');
    cy.get('button[aria-label="increment-button"]').click();
    cy.get('p').should('contain.text', 'You clicked 1 times');
  });
});

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner is ready	-	PASS
2	Mount the Greeting component in isolation	Greeting component rendered with heading, paragraph, and button	-	PASS
3	Find the <h1> element and check its text	Heading element visible with text 'Hello, User!'	Verify heading text is 'Hello, User!'	PASS
4	Find the <p> element and check initial count text	Paragraph visible with text 'You clicked 0 times'	Verify paragraph text shows count 0	PASS
5	Find the button by aria-label and click it	Button visible and clickable	-	PASS
6	Check that paragraph text updates to count 1	Paragraph text updated to 'You clicked 1 times'	Verify paragraph text shows count 1 after click	PASS

Failure Scenario

Failing Condition: Component fails to render or button click does not update count

Execution Trace Quiz - 3 Questions

Why does this test mount the Greeting component alone?

A To check backend API responses

B To test the entire app's UI at once

C To isolate and test the component without other app parts

D To test database connections

Key Result

Component testing isolates UI units so you can check their behavior alone, making bugs easier to find and fixing faster.