React Atdd Playground screenshot

React Atdd Playground

Author Avatar Theme by Codecoolture
Updated: 3 Apr 2025
18 Stars

Template to (deliberate) practice your test-driven development skills.

Categories

Overview:

This is a template that provides a working project skeleton for practicing test-driven development (TDD) skills, front-end testing, or front-end development in general. It includes a React app with Next.js, Cypress for browser testing, Testing Library Suite for unitary/integration testing, Nock for HTTP testing, and GitHub Actions for continuous integration.

Features:

  • React app (with Next.js): Provides different kinds of components for practicing.
  • Cypress: Acceptance testing framework for browser testing using JavaScript.
  • Testing Library Suite: A complete set of tools for unitary/integration testing at the component level.
  • @testing-library/cypress: Enhances Cypress with Testing Library-like queries to access the DOM.
  • @testing-library/react: Makes React components work with Testing Library.
  • @testing-library/jest-dom: Expands the default matchers from Jest to be more DOM-friendly.
  • @testing-library/user-event: Makes user-like interactions (such as user.type or user.click) easier to reproduce at the component level.
  • Nock: A sophisticated HTTP test double.
  • GitHub Actions: A next-gen continuous integration server with an example workflow for running the acceptance and unit testing suites.

Installation:

To install the required dependencies, you can use yarn by running the following command:

yarn install

Summary:

This template provides a ready-to-use project skeleton for practicing test-driven development in the front-end. It includes a React app with Next.js, Cypress for browser testing, Testing Library Suite for unitary/integration testing, Nock for HTTP testing, and GitHub Actions for continuous integration. The template is easy to set up and provides various features to help developers improve their TDD skills.