2-Dec

React

Testing your code

Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!

2 min read

·

By Kristofer Giltvedt Selbekk

·

December 2, 2017

Unit testing your code is important to avoid introducing bugs whenever you are writing new code or refactoring legacy. When you do it right, you can feel comfortable that edge cases are covered and mission-critical components work as they were intended. Although there are many test frameworks to choose from, jest has risen up as a very attractive candidate. Unlike most test frameworks, there is no setup required, and you can get straight to writing your unit tests.

But didn't Jest suck?

Jest didn't enjoy its current popularity ratings in its first iterations. However, in 2016 it was totally rewritten to provide a top-notch developer experience, focusing on speed, stability and a super well designed CLI. So you can rest assured - it's nothing like the bad things you might have heard anymore. And Christmas is about forgiveness and all that, right?

Setup? Done.

As mentioned in yesterday's article, Jest is included with create-react-app. If you have an existing application, however, setting up Jest is easy as peas. Run npm i --save-dev jest and add the following to your package.json file:

"scripts": {
    // Run your test suite
    "test": "jest",
    // Start an iterative test watcher
    "test:watch": "jest --watch",
    // Run tests, outputting a test coverage overview
    "test:coverage": "jest --coverage"
}

That's it! There's no cumbersome setup (although you can tweak it to fit your needs), and you can get straight to writing your tests. Boom!

Snapshots

A huge feature that puts Jest apart from the rest is something called snapshot testing. Simply put it's a way to record a snapshot of the React component tree currently being tested, and then check future tests against the saved result. In other words - you no longer have to write endless assertions or expects, and instead can check two complete rendering results against each other. Huge time saver! You can read more about snapshot testing here.

2-Dec