Component testing vs E2E in Cypress - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference between Component Testing and E2E Testing

Which statement best describes the main difference between component testing and end-to-end (E2E) testing in Cypress?

A Component testing focuses on testing individual UI components in isolation, while E2E testing verifies the entire application flow from start to finish.

B Component testing runs tests only on backend APIs, while E2E testing runs tests only on frontend UI components.

C Component testing requires a full database setup, while E2E testing uses mocked data only.

D Component testing is slower than E2E testing because it tests the whole app, while E2E testing is faster because it tests small parts.

💡 Hint

Think about the scope each testing type covers.

Component testing isolates and tests individual UI parts, while E2E tests simulate real user scenarios across the full app.

❓ Predict Output

intermediate

Output of a Cypress Component Test

Given this Cypress component test code, what will be the test result?

Cypress

import { mount } from 'cypress/react';
function Button({label}) {
  return <button>{label}</button>;
}
describe('Button component', () => {
  it('renders correct label', () => {
    mount(<Button label="Click me" />);
    cy.get('button').should('have.text', 'Click me');
  });
});

A Test fails because the button text is empty.

B Test passes because the button text matches 'Click me'.

C Test fails with a selector error because 'button' is not found.

D Test fails due to a syntax error in the component code.

💡 Hint

Check what the component renders and what the assertion checks.

The Button component renders a button with the label 'Click me'. The test checks that the button's text matches exactly, so it passes.

❓ assertion

advanced

Correct Assertion for E2E Login Test

In an E2E test for a login page, which assertion correctly verifies that the user is redirected to the dashboard after login?

Cypress

cy.visit('/login');
cy.get('#username').type('user1');
cy.get('#password').type('pass123');
cy.get('button[type=submit]').click();

A cy.get('button[type=submit]').should('be.disabled');

B cy.get('h1').should('contain.text', 'Login');

C cy.url().should('include', '/dashboard');

D cy.get('#username').should('be.visible');

💡 Hint

Think about what confirms successful navigation after login.

Checking the URL includes '/dashboard' confirms the user was redirected after login. Other options check unrelated elements.

🔧 Debug

advanced

Debugging a Failing Component Test

This Cypress component test fails with 'Timed out retrying: Expected to find element: button, but never found it.' What is the likely cause?

Cypress

import { mount } from 'cypress/react';
function Link() {
  return <a href="#">Click here</a>;
}
describe('Link component', () => {
  it('renders a button', () => {
    mount(<Link />);
    cy.get('button').should('exist');
  });
});

A The component renders an <a> tag, but the test looks for a <button> element.

B The mount function is missing a required argument.

C The test is missing a wait command before cy.get.

D The component code has a syntax error causing it not to render.

💡 Hint

Check the element types in the component and the test selector.

The component renders an anchor tag, but the test searches for a button, so the element is never found.

❓ framework

expert

Choosing Test Types for a Complex Web App

You are testing a complex web app with many UI components and user flows. Which Cypress testing strategy combination is best to ensure fast feedback and full coverage?

A Write only component tests because E2E tests are too slow and flaky.

B Write only E2E tests covering all user flows to avoid duplication.

C Write unit tests for backend APIs and skip frontend testing.

D Write extensive component tests for UI parts and a few critical E2E tests for main user flows.

💡 Hint

Consider speed, coverage, and reliability of tests.

Component tests give fast feedback on UI parts, while E2E tests ensure critical flows work end-to-end. Combining both balances speed and coverage.