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.

Practice

1. What is the main focus of component testing in Cypress?

easy

A. Testing the entire app flow from start to finish

B. Testing individual parts of the app in isolation

C. Checking the app's performance under load

D. Verifying database connections

Solution

1. Step 1: Understand component testing scope

   Component testing focuses on small parts or components of the app, testing them alone without the full app context.

2. Step 2: Compare with other testing types

   E2E testing checks the whole app working together, so it is not the focus of component testing.

3. Final Answer:

   Testing individual parts of the app in isolation -> Option B

4. Quick Check:

   Component testing = isolated parts [OK]

Hint: Component testing isolates parts, not full app [OK]

Common Mistakes:

• Confusing component testing with E2E testing
• Thinking component testing checks full app flow
• Assuming component testing checks performance

2. Which of the following is the correct Cypress command to mount a React component for component testing?

easy

A. cy.visit('/component')

B. cy.request('/api/component')

C. cy.mount()

D. cy.get('MyComponent').click()

Solution

1. Step 1: Identify component testing command

   In Cypress component testing, cy.mount() is used to render a component in isolation.

2. Step 2: Eliminate other commands

   cy.visit() is for E2E page visits, cy.get() selects elements, and cy.request() makes HTTP calls, none mount components.

3. Final Answer:

   cy.mount(<MyComponent />) -> Option C

4. Quick Check:

   Mount component = cy.mount() [OK]

Hint: Use cy.mount() to render components in tests [OK]

Common Mistakes:

• Using cy.visit() for component testing
• Confusing cy.get() with mounting
• Trying to mount components with cy.request()

3. Given this Cypress E2E test code, what will be the output in the test report?

describe('Login flow', () => {
  it('should show error on wrong password', () => {
    cy.visit('/login')
    cy.get('input[name="username"]').type('user1')
    cy.get('input[name="password"]').type('wrongpass')
    cy.get('button[type="submit"]').click()
    cy.contains('Invalid credentials').should('be.visible')
  })
})

medium

A. Test passes without checking any message

B. Test fails because cy.visit() is not allowed in E2E

C. Test fails due to syntax error in selectors

D. Test passes if 'Invalid credentials' message appears

Solution

1. Step 1: Analyze test steps

   The test visits the login page, enters username and wrong password, clicks submit, then checks for error message visibility.

2. Step 2: Verify correctness of commands

   All commands are valid Cypress E2E commands. The assertion checks if the error message is visible, so test passes if message appears.

3. Final Answer:

   Test passes if 'Invalid credentials' message appears -> Option D

4. Quick Check:

   E2E test passes if error message visible [OK]

Hint: E2E tests check full flow and visible messages [OK]

Common Mistakes:

• Thinking cy.visit() is invalid in E2E
• Ignoring the assertion on error message
• Assuming syntax errors in selectors without cause

4. Identify the error in this Cypress component test code:

import MyButton from './MyButton'
describe('MyButton component', () => {
  it('renders button text', () => {
    cy.mount(MyButton)
    cy.get('button').should('contain.text', 'Click me')
  })
})

medium

A. Missing JSX syntax when mounting component

B. cy.get selector is incorrect

C. cy.mount cannot be used in component tests

D. No assertion is present

Solution

1. Step 1: Check component mounting syntax

   In Cypress component testing, components must be mounted using JSX syntax like cy.mount(<MyButton />), not just the component name.

2. Step 2: Verify other parts

   The selector cy.get('button') and assertion are correct. cy.mount is valid in component tests.

3. Final Answer:

   Missing JSX syntax when mounting component -> Option A

4. Quick Check:

   Use JSX syntax in cy.mount() [OK]

Hint: Always wrap component in <> when mounting [OK]

Common Mistakes:

• Passing component without JSX syntax to cy.mount
• Thinking cy.mount is invalid in component tests
• Misreading selector as incorrect

5. You want to test a login form component in isolation but also verify the full login flow including navigation. Which Cypress testing approach should you use for each task?

hard

A. Use component testing for form UI; use E2E testing for full login flow

B. Use E2E testing for form UI; use component testing for full login flow

C. Use only component testing for both tasks

D. Use only E2E testing for both tasks

Solution

1. Step 1: Match testing types to tasks

   Component testing is best for isolated UI parts like the login form component itself.

2. Step 2: Use E2E for full app flow

   To verify the entire login flow including navigation and backend, E2E testing is appropriate.

3. Final Answer:

   Use component testing for form UI; use E2E testing for full login flow -> Option A

4. Quick Check:

   Component = UI parts, E2E = full flow [OK]

Hint: Component tests parts; E2E tests whole app flow [OK]

Common Mistakes:

• Mixing up which test type suits UI vs full flow
• Trying to test full flow with component tests
• Ignoring navigation in login flow testing