Back to Tech Tips

React Testing: What it is and Why All Modern Developers Should Know It

hackeryou-2018-accelerated-2

Blog — Tech Tips React Testing: What it is and Why All Modern Developers Should Know It

4 min read

2019-Winter-Bootcamp-Jonathan-Wong

By Jonathan Wong

Software Engineer

Apply Digital Ltd

I used to think testing my application meant this:

Load up my app, fill out the form, and hope it submits successfully. If it does, the app must be working, right? I’ve since learned that there is much more to think about.

What if I have to exclude certain letters from the input? Or account for special characters? Or work with required fields?

What if I click a button to populate the items in my list and that list is empty? Do I get the “can’t read property of undefined error?” Would it crash my entire app?

What if something in the list is missing a field? What if I have one person with a name, address, and phone number, and another with just a name and phone number? Would I see “address: undefined”? Would it show just the name and phone number?

And those are just a few scenarios - what if there are other edge cases that I’m not even thinking of?

Testing is a vital part of the application building process that is often overlooked, and when there's a time crunch, tests can sometimes be neglected altogether. The problem is that there are countless possible edge cases that exist when we write applications, and by trying to test for them all manually, we’re taking up valuable time, and leaving lots of room for human error.

That's when React Testing comes in. Not only does this skillset make your code more efficient and save valuable time, but it tests for edge cases you’re likely not even thinking of, and makes your app more likely to succeed.

Why Testing is Important

Edge Cases: Testing allows us to cover all these edge cases and more, so that if the test fails, we have an easy way of discovering bugs and fixing them.

Expected Behaviour: By simulating our user behaviour with Testing, we can guarantee that our application behaves the way that we expect it to. For example, if the user pushes a button that shows 3 list items, then 3 list items will actually appear.

Broken Code: Testing makes it easier for us to see where we might have broken our code while refactoring. For example, if I had to change a variable in one place and I didn’t realize it broke my code in another, running a test would show me where my code is broken. In a simple application, it may be easy to find the bug without testing, but on a large application it can be like looking for a needle in a hay-stack!

Quality Guarantee: Testing also acts as a guarantee of quality when you hand over your code to another developer. Any new developers that take over a project with a fully tested application will be ecstatic to see all your tests passing! Also, if a developer who takes over isn’t familiar with the code base then they might end up breaking your code as they work on it, and a failing test would point them in the right direction.

Avoiding Human Error: Sometimes no matter how much we think we’ve checked our applications, things still fall through the cracks. Testing makes it possible to catch errors that you might normally miss when testing manually.

What is React Testing?

Now that we understand why testing is important, let’s explore what testing actually is. I like to think of testing as taking the code we’ve written and using other code to ensure that it works. Simply put, we are simulating our application’s behaviour using code and ensuring that it behaves how we expect it to. If you want to dive deeper into the code, you can see some examples of React Testing in action, and below we’ve listed some of things you can test for with React Testing.

What can you test for?

  • When you fill out the form, the result is rendered to the screen.
  • When you fill out the form with an error it renders a message with the color red.
  • If you have a function that sorts an array of strings alphabetically, you can test that it returns the properly assorted array.
  • The application loads with the default color scheme if none is specified.
  • When you hit the “delete” button, an element disappears from the page.
  • A function returns the sum of two numbers.
  • The form button button is disabled when one of the required fields is empty.
  • The form button enables when all the required fields are entered.
  • The component renders an amount of list items equal to the amount of items in an array.

And much more!

Why Should You Learn React Testing?

I would argue that testing is one of the pillars of the web development process. In my day-to-day work, my code reviews aren’t approved unless I fully test them - it’s an important step in ensuring the quality and maintainability of your codebase.

I’ve also learned that, as a junior, you can set yourself apart from the rest of the pack if you’re well versed in testing. Senior developers understand the importance of testing and will be both surprised and impressed that you’ve taken the time to learn how to test an application.

My personal favourite testing APIs to use for testing are Testing-library and Jest.

Ultimately, learning testing will make you a better developer, a more employable developer, and help you write more maintainable and error-free code! So take the time to learn this important skill - you won’t regret it!


Looking to level up?

Get in touch with us to see how we can help boost your coding skills:

Book a Call with a Student Success Consultant

Get started for free

Join our free monthly tech workshops and panel events!