Testing is one of the development phases these days, most of the companies out there ask about it when you interview them.
The testing process is to execute some code before it goes into other development processes to make sure no one harms the actual working code.
When you write a function that takes inputs and returns output, how do you test this small function? For example, we have one function take two inputs and return the summation of them. We need to make sure the summation function return the right value every time. How we do that?
How summation work. This is how I test my code manual.
However, this manual type of testing not flexible at all, because when one case throws an error, we can’t know which line the error accrued, and what is the error happening. Also, we can’t continue the whole test cases and give the number of success cases and failed one, check the code bellow for fixing these issues.
You can remove the implementation for
The user doesn’t care about the implementation details. — Kent C. Dodds
Why we need testing? We need testing to catch bugs before it goes from your hands.
The bug is something wrong happen like an error, wrong behaviour, wrong data, and the user can’t continue the flow.
We have bugs shown when writing code, these types of bugs can catch in the implementation phase, these bugs called static bugs.
Testing is the process to make sure everything is going to the right place. Making sure every input give the same output every time passed. Testing gives judges for the quality of the product.
Testing one thing or one unit that do one job with given input and return output. Give it some inputs as testing samples to make sure no one damages your code. Any dependency on the unit testing developer needs to mock it.
Unit tests are one of the reasons to use functional programming and pure functions as much as possible. The purer your application is, the more comfortable you can test it.
When you test, you don’t concern what the implementation details for this unit your concerns must be if it is working or not. Expect input to be equal to a given output. You should cover all small pure units of the application-utils, services and helpers because all of your team use them.
Example of testing component unit.
Don’t add too much logic to your test it’s confusing. The user doesn’t care if it is a span or div. — Kent C. Dodds
Mock is to write similar code for a library or something you use in your component, and you don’t care what the implementation of that library, or when you call an API inside your component, no need to call it every time you run the test. You know the expected result for an API so no need to call it and wait for the server to return results.
Mock a test dependency.
Also, it can be used when the implementation not ready yet like you are waiting for a module from other people on the company and you expected the value or the component to be something so you can mock it.
Integration testing is the next step after you have done with unit testing. Integration is more complicated than unit testing because it shows how things work together and how things changed from state to another.
You can also use integration tests to show how your components work together. Integration testing phase can catch bugs that when you fix a bug in one component and break the other.
Here is an example from testing workshop how to implement integration testing for user login.
Integration testing example
Integration testing is a little harder than unit testing. With integration testing stick with the happy path and test the edges cases with unit testing.
Snapshot testing is a useful tool to make sure UI doesn’t change from the implementation phase, because you don’t need your users going made of this.
Snapshot testing gives you an idea when something changed like CSS or HTML element.
Snapshot testing helps the programmers to make sure they don’t change the user behaviour with the wrong way.
Snapshot testing example with React.js
End to End testing phase to test the user flow and make sure flow is similar to user interaction. Like clicking a button, go to some links, log in. Also, Using the application as a real user plus you see the behaviour by yourself and simulate the user behaviour.
It is important to remember that these tests are the hardest to set up. Imagine yourself creating an environment to run a test on different machines, devices, browser types and versions.
End to End testing operates the application as a black box and what the user does. Cypress is one of an end to end testing experience.
Fast, easy and reliable testing for anything that runs in a browser. — Cypress.io
Example from Cypress.io
You have to start from static testing then goes to the unit then Integration then end to end testing.
When you go from static to end to end, you catch more and more errors and more significant problems.
A user who logged in can’t check out to buy something this can’t catch in static testing.
Finally, these types not the only types of testing out there, there are others (e.g. Regression testing, Manual testing, Security testing, Localization testing, Penetration testing, Fuzz testing, Stress testing, Usability testing, User acceptance testing.
For me, I see learning testing change how you write code because test must make your code better and less coupled.
I am using jest framework for testing right now, don’t stop here and give it a try it is a perfect tool and I love it. It is my first tool for testing so I can’t make a comparison between other testing frameworks out there. For more things about it and how to configure it watch Kent C. Dodds testing workshop.
I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.
What is Unit test, Integration Test, Smoke test, Regression Test? Unit test: Specify and test one point of the contract of single method of a class. This should have a very narrow and…stackoverflow.com
Learn to Test React Applications with Jest, react-testing-library and Cypress - Exclusive Course Learn to catch errors before they reach the end user with automated tests! Write maintainable tests for your React…frontendmasters.com