Make JavaScript Testing Work for You

After I watch Kent C. Dodds workshop about testing, I write this article to give a summary and an overview what I know about testing.

Photo by Goran Ivos on Unsplash

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.


Your test must make your code better. — Kent C. Dodds workshop

What is JavaScript test

Testing is one of the development phases these days, most of the companies out there ask about it when you interview them.

The technical definition that Kent C. Dodds give us in his workshop is that throw an error when something is wrong happening, and the error used to cautions the developers about that.

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?

Check the code sample in JavaScript for the summation function

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 expect, test, logs and run these test using jest framework. Jest is a testing framework for javascript.
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.

Types of bugs

The bug is something wrong happen like an error, wrong behaviour, wrong data, and the user can’t continue the flow.

Here are some types of bugs I know:

  • User interface.
  • Performance.
  • Integration.
  • Business logic.
  • Security.
  • Scaling.

How to prevent bugs

We have bugs shown when writing code, these types of bugs can catch in the implementation phase, these bugs called static bugs.

  • When you use an undefined variable.
  • Wrong arguments type for a function.

Kent C. Dodds recommends using flow-type, typescript to prevent these types of errors when you are coding.

Bugs everywhere

Types of testing

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.

Unit testing

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 a test dependency

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

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.

Photo by Jonatan Pie on Unsplash

Snapshot 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

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.
Spend your time in integration testing. — Kent C. Dodds testing workshop.

Conclusion

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.

Why jest

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.

Hi my name is Yazan Aabed. Grown up in Palestine. My major was in computer science. I am a Frontend Engineer & JavaScript lover 💫👨‍💻. Mostly working with Frontend frameworks like (AngularJs, ReactJS). You can call me #Geek 🤓. Also, I Like to share my knowledge with other people and learn from them 💥🔥🌪. You can find me on GitHub, Medium, Twitter.

My latest tweets