Skip to content

Latest commit

 

History

History
58 lines (43 loc) · 3.38 KB

README.md

File metadata and controls

58 lines (43 loc) · 3.38 KB

React ATDD Playground (with Next.js) 🎈

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.
  • 🔴 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: github action badge

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)