Building an E2E Test Suite for a Simple React App with Jest and React Testing Library

This challenge focuses on creating a robust end-to-end (E2E) test suite for a basic React application using Jest and React Testing Library. E2E tests are crucial for verifying that your application functions correctly from the user's perspective, simulating real-world interactions and ensuring a seamless user experience. This exercise will solidify your understanding of E2E testing principles and practical implementation.

Problem Description

You are tasked with building an E2E test suite for a simple React application that displays a counter. The application has a button that increments the counter and another button that decrements it. The current counter value is displayed on the screen.

What needs to be achieved:

• Create a Jest test suite that covers the core functionality of the counter application.
• Use React Testing Library to interact with the application's components and verify their behavior.
• Ensure the tests are reliable and provide meaningful feedback when failures occur.

Key Requirements:

• The test suite should include tests for:
  • Incrementing the counter.
  • Decrementing the counter.
  • Verifying the initial counter value.
• Tests should use user-event for simulating user interactions (clicks).
• Tests should be written in TypeScript.
• The test suite should be set up to run automatically as part of your development workflow.

Expected Behavior:

• When the increment button is clicked, the counter value should increase by 1.
• When the decrement button is clicked, the counter value should decrease by 1.
• The initial counter value should be 0.
• Tests should fail if any of these conditions are not met.

Edge Cases to Consider:

• Decrementing the counter when it's already at 0 (should not go below 0).
• Ensure the UI updates correctly after each interaction.
• Consider how to handle asynchronous updates if any are present (though this simple counter doesn't have them, it's good to keep in mind for future tests).

Examples

Example 1:

Input: Initial counter value is 0, click increment button once.
Output: Counter value displayed is 1.
Explanation: The increment button click should increase the counter by 1.

Example 2:

Input: Initial counter value is 5, click decrement button once.
Output: Counter value displayed is 4.
Explanation: The decrement button click should decrease the counter by 1.

Example 3:

Input: Initial counter value is 0, click decrement button once.
Output: Counter value displayed is 0.
Explanation: The counter should not go below 0 when decrementing from 0.

Constraints

• Technology Stack: React, TypeScript, Jest, React Testing Library, user-event.
• Application Complexity: The application is a simple counter with increment and decrement buttons. No external API calls or complex state management.
• Test Coverage: Aim for comprehensive coverage of the core counter functionality.
• Test Execution Time: Tests should execute within a reasonable timeframe (under 2 seconds).

Notes

• You'll need to set up a basic React application with a counter component. You can create this from scratch or use a boilerplate.
• Install the necessary dependencies: npm install --save-dev jest @testing-library/react @testing-library/user-event typescript ts-jest
• Configure Jest to work with TypeScript (create a jest.config.js or similar).
• Focus on writing clean, readable, and maintainable tests.
• Consider using screen from React Testing Library for querying elements.
• user-event provides a more realistic way to simulate user interactions compared to directly manipulating the DOM.
• Think about how to structure your test suite for better organization and readability. Consider using describe blocks to group related tests.