An Explanation of how jest testing is implemented, and how this helps in the big picture.
We are gonna take a dive into test driven development first, then we are gonna dive into the tool we are gonna use which is jest. First off before anything what is test driven development?
Test Driven Development is typing as many unit test as production code to prevent less bugs. It follows the RGR principle or the Red, Green and Refractor principle.
So the red principle is writing test code, and not thinking of the implementation of production code. Design the test code for general purpose in sense that if production code needs to be changed it, the tests can be changed easily and effectively. We want to ideally write one unit test at a time, and production code for just that unit test not all the possible code.
Then we will go to the green principle or step 2. Where we will start writing all of our production code for that singular unit test.
We will write production code, where it will just be concerned about passing that specific test.
Then as the final step we will refactor the code.
Which will remove any code not following d.r.y principles if possible, and not breaking our code completely.
Now that is it for a explanation of test-driven development, now let’s actually implement it.
First create a react app and name it my-calculator
npx create-react-app my-calculator OR create-react-app my-calculator
Then create a components Folder and within that folder have a Calculator folder and within that folder have a Calculator.test.js, Calculator.js, and a Calculator.css file. Create react app by default has jest testing enabled, but it can’t be customized, in that case you would need webpack.
touch Calculator.js Calculator.test.js Calculator.css
First delete all code in the render method, and import your Calculator component and add it between a div tag.
Now let’s define our todo list.
We will define 5 items for our todo-list for the sake of the tutorial, this item are the cases we are gonna test, and write production code for each item at a time.
- Feature: add 5 and 10 to get 15
- Not 50
- Equals 15
- Equal 15 the same way numbers switched around.
Doubts: Will it return the intended result?
2. Feature: subtract 5 and 10 to get -5
- Not 5
- Equals -5
- Does not equal -5 the same way numbers switched around.
Doubts: Does it give a syntax or reference Error if the result is less than 5
3. Feature: Multiply 5 and 10 to get 50
- Not 5
- Equals 50
- Equal 50 the same way numbers switched around.
Doubts: Will it return the intended result?
4: Feature: Divide 200 by 20 to get 10
- Not -10
- Equals 10
- Does not equal 10 if numbers we switched around.
Doubts: Will it return a decimal? Do I need Math.floor?
5. Feature: Check is 80, 5 is a even number
- Not odd
- Does have a remainder of 0 when divisible by 2.
- Does not have a remainder of 1 when divisible by 2.
Doubts: Will it return the intended result? Will the tests pass as intended?
Now we have our todo list setup. Lets start writing our first unit test in our Calculator.test.js file. We will first test a function that adds 2 numbers, so we will declare a method called add which will add your firstNum and secondNum together. Your Calc constructor method which will take 2 arguments which will be 5 and 10.
Then we will assign some sample data to a instance of the constructor function when it takes 5 and 10, and another one with numbers switch around.
We will write our test to check if it is not equal to 50 using isFalsey, and using isTruthy to check if it is 15. Also check if the numbers switched around would still be 15.
Now your test should pass, and it is time to write some production code, just for it to pass. Now in our Calculator.js file we will define a class component which will have state, and a add method that will set our operation state to add. Also a equal method which will based on the operation from our state which will return the intended result. Then in our render method we will render the calculator with all the features we will need. We will just pass the add function. Also copy and paste this in the Calculator.css file.
It worked, and now how can we refactored our code. Well it really depends if you actually need to, but in our case of this tutorial we don’t need to since we are working with a basic code.. We have the add function which will set the operation state to add therefore meaning we can change state of num2, and once we click equal or initiate the equal method. It will hit our else if so we get the intended result based on the operation which then adds the two numbers, sets num1 state to towards the result.
We are done with our first test!
Let’s start on our subtract function which will take 5 and 10. So we will declare another instance of the constructor function which will be 5 and 10. Also we will define a subtract method in our constructor function. Which will subtract firstNumber and secondNumber.
Lets write our test, we will check if the result is not equal to 5 using isFalsey, and check if it is -5 using toEqual. Then it should not equal when the numbers are switched around.
Our tests should pass!
Now we will start writing production code. So first define the subtract method in your react component where if sets the operation state to subtract. Then add a else if in our equal method where it subtract two numbers from state and returns the result. Then assign it to the subtract symbol button on it’s onClick event listener.
Now the method should work properly, and in this we can refactor by destruct our a and b from our state.
Great Second Test Done!
On to the next test we will define a multiply method which will multiply two numbers. So we assign a variable to an instance of the constructor method, with 5 and 10 as the arguments. Then we will use the multiply method of that instance, which will be the intended result.
Let’s start writing our tests.
The result should not be 5 by using isFalsey, and should be 50 using toEqual. Should be the 50 still when numbers are switched around. Now the test should pass, now let’s start writing production code.
Define a multiply method which will set the operation state to multiply, and based on that. Equal method will multiply two numbers from state, and set the result. Assign the multiply method to the multiply button’s onClick event listener.
Now the method should work properly, and in this can be refactored to destruct our a and b from our state.
Great Third Test is done!
Now lets get started on our fourth test. We will define our divide method within our constructor function. Then we will assign instance of the constructor function then pass 200, 20. Then we will use the divide method of that instance to get the intended result.
Let’s start writing our tests.
We will test if it is not -10 when we use the divide method using isFalsey. Then we will test if it is 10 by using toEqual, and test the same way when the number are switched around.
Great our tests should pass, and now we will write some production code. We will define a divide function within our react component, then add a else if to our equal method to return intended result. Then assign to our event handler for our divide button.
Great we are done with our fourth test!
Let’s get started on the final test. We will have a getRemainder function which will get the remainder of num. It is useful when a checking if a number is odd or even. So we define two functions in our instance one for each number to get the remainder. Then assign a another variable used to get the intended result and pass 80, and 5.
Great let start writing our tests .
We will check if the 80 is a oddNumber, and it should not be so we will use isFalsey. Then we will check if it is a even number and it should be true by using isTruthy. Then check if the result is not equal to 1 using toEql. Then do the same tests for 5 except that it should be equal to 1.
Great lets start writing our production code. We will have a getRemainder function, which will set the operation to remainder which will add a else if to your equal method to return intended result the (remainder of two numbers). Then assign the function two the getRemainder button onClick event handler.
Now let’s try to refactor by destruct a and b.
Great all of our tests are done!!
Great we went through all our tests using RGR principle. This is a very basic example of test driven development. If you need any help here is my facebook, instagram, and linkedin, just message with any questions.
Here is my github for reference:
A calculator testing tutorials. Contribute to AliA1997/My-Calculator development by creating an account on GitHub.