Repository files navigation

HireThe TDD Workshop byCodecoolture.

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

• AReact app (withNext.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 asuser.type oruser.click) easier to reproduce at the component level.
• 🔴Nock: a sophisticated HTTPtest 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:

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

$ 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 resourceshere 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 :-)

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)