React ATDD Playground

React ATDD Playground is an open-source, Next.js-based project skeleton for deliberately practicing test-driven development (TDD) and front-end testing, created by Codecoolture and promoted through The TDD Workshop.

What is React ATDD Playground?

React ATDD Playground is a template repository that combines a working React application built with Next.js, a full acceptance testing setup using Cypress, and a component-level testing stack built on Testing Library and Jest. It takes a deliberate-practice approach: you clone the skeleton, then write or extend tests the TDD way—red, green, refactor—while having all the infrastructure preconfigured. The template runs on Node.js with yarn scripts, integrates GitHub Actions for continuous integration, and was made by Codecoolture, the team behind The TDD Workshop.

Key Features

• Cypress acceptance tests — Use the yarn test:acc script to run end-to-end browser tests written in JavaScript against the Next.js app.
• Testing Library Suite — Includes @testing-library/cypress, @testing-library/react, @testing-library/jest-dom, and @testing-library/user-event to write component-level unit and integration tests with DOM-friendly queries and matchers.
• Nock HTTP test double — A preconfigured library for mocking HTTP requests in tests, so you can isolate components from real network calls.
• Jest and Testing Library unit tests — The yarn test:unit script runs the Jest test suite with the DOM matchers and user-event interactions.
• GitHub Actions workflow — The repository ships an example CI workflow that runs both the acceptance and unit test suites; the README shows a workflow badge for the main branch.
• Single-command test runs — yarn test:all executes all test suites at once, while yarn test:acc:live opens the Cypress interactive runner.
• ESLint integration — yarn lint lints the project with ESLint, matching what most editors already run.
• Next.js dev server — yarn dev starts the app locally at http://localhost:3000, with pages and UI components ready for testing.

Who is it for?

React ATDD Playground is aimed at developers learning or teaching test-driven development in the front-end context. It suits:

• Front-end developers who want to practice TDD on a realistic React/Next.js codebase instead of toy problems.
• Trainees in TDD workshops — the template is promoted by The TDD Workshop and includes curated references and programming katas to guide the practice.
• Testing enthusiasts who want a ready-made environment combining Cypress for acceptance testing and Testing Library for component tests, with Nock for HTTP mocking.
• Open-source contributors who want to inspect a professionally structured testing setup to model their own projects.

What can you do with it?

• Practice TDD on programming katas — Add a small UI layer to classic katas (like those in the Coding Dojo Kata Catalogue) and drive the implementation through failing tests, using the provided Jest and Cypress setups.
• Experiment with front-end testing techniques — Exercise different component types (UI blocks, pages) and test them at the acceptance level with Cypress and at the component level with Testing Library.
• Learn HTTP mocking with Nock — Explore how Nock acts as a test double to simulate backend responses in isolation, a common pattern for front-end tests.
• Set up CI for a testing suite — Use the provided GitHub Actions workflow as a reference to automate test runs in your own repositories.

How does it work?

After cloning the repository, run yarn install to install dependencies. Three yarn scripts are then available: yarn test:all runs the entire test suite, yarn test:acc executes only the Cypress acceptance tests, and yarn test:unit runs only the Jest and Testing Library component tests. For development, yarn dev starts the app at localhost:3000, and yarn test:acc:live opens the interactive Cypress UI. The README also points to public references and programming katas to structure your TDD practice.

FAQ

Is React ATDD Playground free to use?

Yes, the template is open-source and hosted on GitHub under the Codecoolture organization. There is no paid tier; you clone or fork it to begin practicing TDD immediately.

What testing tools are included?

The repository includes Cypress for browser-level acceptance tests, Jest as the test runner, and the Testing Library suite (@testing-library/react, @testing-library/cypress, @testing-library/jest-dom, @testing-library/user-event) for component-level tests. Nock is included as an HTTP mocking test double.

How do I run only the Cypress tests?

Use the yarn test:acc script from the project root. If you want the interactive Cypress interface, run yarn test:acc:live.

Does this template include a CI pipeline?

Yes, the repo includes an example GitHub Actions workflow that runs both the acceptance and unit test suites. The README shows a workflow badge for the main branch, and you can use that workflow file as a starting point for your own continuous integration.