/react-tdd-demo

A workshop on React app development with TDD

Primary LanguageJavaScript

README

This is a project for people to practice React component development with Test-Driven-Development (TDD).

Project Configuration

The project is configured with the following tools.

Component Testing

  • react-testing-library
  • jest-prop-type-error

End-to-End Testing

  • Cypress
  • cypress-testing-library

Component Development

  • Storybook

Code Formatter/Linter

  • eslint
  • prettier

npm scripts

TODO: explain the commands available

Upgrade create-react-app version

You need to update the version of 'eslint' in devDependencies section accordingly to use the same version required by react-scripts.

Workshop Instructions

This workshop is inspired by this blog post which shows how to develop a React application with TDD approach.

I roughly followed the same steps in the blog post, and refined a bit based on my taste. I also added story book to help styling the components.

You can check out the comment history to see the step-by-step changes from scratch.

If you would like to repeat the steps by yourself, you can start with a starter project I created.

Learning TDD with frontend development

Besides this tutorial, you can also find useful tips on how to follow TDD when developing React applications:

License

MIT