codecoolture / react-atdd-playground

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

React ATDD Playground (with Next.js) 🎈

Hire The TDD Workshop by Codecoolture.

Hi 👋,

Here is a template with a working project skeleton to (deliberate) practice your test-driven development skills (or just front-end testing or front-end development in general).

📦 What's in the box?

• A React app (with Next.js): so you can exercise with different kinds of components: UI blocks, pages...
• 🌳 Cypress: an 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. This repository includes an example of a workflow to run the acceptance and unit testing suites:

How to play?

First, you will need to install the required dependencies. They can be all automatically installed by using yarn:

$ yarn install

Then, there are available three yarn scripts to execute different parts of the test suite:

$ yarn test:all # it will run all the tests
$ yarn test:acc # it will run only the Cypress test suite
$ yarn test:unit # it will run only the Jest & Testing Library test suite

If you're starting with TDD, some resources here may help you through the journey. If you don't know where to start, programming katas are a popular mechanism to practice TDD (here, you may find some popular ones). Though they are not explicitly targeted for front-end, it should be easy to add a small UI layer on top of them :-)

Other useful commands

Besides the above testing-focused commands, these may help you during your practice session:

$ yarn dev # starts the app at http://localhost:3000
$ yarn test:acc:live # opens the Cypress interactive UI
$ yarn lint # lints the project by using ESLint (similar to what your editor probably already does)