To do app with Cypress TDD
Having recently been introduced to Cypress, I wanted to take a course and build an app using a TDD approach. Having developed a few React apps now, I absolutely see the need for having a suite of tests to protect against regressions. The Cypress website had the perfect video tutorial for getting started so I followed along with it. Cypress is the first testing framework that feels natural to me and I am very keen to implement it into my workflow.
This repository along with the notes I'd taken under My learnings will be my reference when building future apps with TDD.
Table of Contents
I learned a lot about how to use Cypress and also how useful it is to write tests in advance of writing your code. This allows you to take a step back and think at a higher level about how the problem should be solved, similar to writing pseduo-code.
- Structure my tests
- Use DOM queries and check element contents
- Use stubs to simulate server endpoints and responses
- Use fixtures to fake response data
- Setup a json server
- Use iterator methods to keep test code DRY
- Run both visual and headless testing
- Write custom commands
Everything that I'd learned about Cypress during this course is within this document.
The React app as pre-built as part of the tutorial, but if you would like set this project up and check that my tests are running as they should, then please do the following. You will need to have the Yarn package manager installed.
git clone firstname.lastname@example.org:KyeBuff/cypress-todo.git to-do && cd to-do
Start the localhost.
yarn && yarn start
Open a new tab and cd into the project directory, then run Cypress.