React Atdd Playground
Template to (deliberate) practice your test-driven development skills.
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.
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.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Vercel
Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.