This is a simple workshop in how to develop using TDD comprising of a starting point and a example implementation
Using TDD develop a simple react calculator that multiplies two numbers together and displays the result.
The base acceptance criteria(AC) )is:
- I must be able to input 2 numbers
- I must be able to see the product of those two numbers
A template of a simple react project is given in ./template
Before running anything else it will work you will need to run
npm install
To run tests use:
npm run test
to run the website:
npm run dev
Code can go in the main App.jsx component for simplicity.
The example can be found in ./example
. It is not the best implimentation but it is my example of how I do it.
Same commands as above for testing and running.
This uses the following tools:
- Vite
- React
- Vitetest
- @testing-libary/react
There are other requirments in order to set these up but these are what you'll be interacting with.
These aren't essentail these are just tools I have used to write this so it may be usefull:
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Description: wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper