Introduction To Testing With Jest

Introduction To Testing With Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Why should I write tests?

As software developers, it is our prime responsibility to ensure that we ship apps that are of high quality. Now, how do you know if your app passes the quality test? Well, writing tests to validate the app if one of the fundamental tasks that we need to do as software developers.

Often times, we tend to skip writing tests for our code. And we may have plenty of reasons like meeting deadlines, client doesn’t care about tests, and so on. I believe, writing tests needs to be a part of our everyday job, and we should integrate it within the process.

Alright, enough said about the importance of testing.

If you are developing in JavaScript, one of the most popular and easy to use testing frameworks out there today is Jest.

What is Jest?

Jest is a JavaScript testing framework that is widely popular today. It works with all modern JavaScript frameworks like React, Angular, Vue, Node and so on.

If you are someone who hates writing tests, Jest will change your opinion. It is super easy to use and developers love writing tests with Jest.


Tell me more, what is cool about Jest?


No configuration

Remember how long it takes to set-up a testing framework and integrate it within your app. Well, Jest makes things a lot easier and comes with no configuration at all. It comes out of the box on most modern JavaScript frameworks and requires no setup time. Hence, saving you tons of developer time. I use Jest with my React and React Native applications with zero configuration.


Simple Mocking

Jest makes writing mock functions quite simple. It uses custom resolver for imports in your tests, hence making it easy to mock any object that is outside of your test’s scope.


Snapshots

Jest uses snapshots that can make your test keep track of large objects in an organized manner. Snapshots live either alongside your tests, or are embedded inline. This is useful, if you have a huge object stored in the redux store, and want to validate it’s data.


Tests run in Parallel

This is one of the distinguishing feature of Jest, making it suitable for fast paced development. The tests run parallely, in isolation. Since they have their own processes, it maximizes the performance.


Fast

Since tests run in parallel, Jest is a fast option for testing. It also runs previously failed tests first, and re-organizes test runs based on how long test files take.


Great Documentation

Jest APIs are documented clearly and are easy to use. You can browse through the Jest APIs to get an idea on how to get started.

If you are interested to learn more about Jest, the talk below from the core team will provide a lot of insights.


Code Coverage

Jest can generate code coverage by simply using the –coverage command. No additional setup is needed to generate the coverage report. This can be used to validate your test cases, and predict how many more test cases are needed to achieve better coverage.


Snapshot Testing with Jest

Snapshot testing ensures that your UI does not change in an unexpected manner. The idea is simple. An initial snapshot of UI component is taken, and it is compared to it’s reference snapshot file stored in the test. The test will fail, if the two snapshots don’t match. This will indicate to us that either, the change is unexpected, or the reference snapshot needs to be updated to the latest version of the UI component.

These types of testing are really common while testing mobile applications.

Jest supports snapshot testing your React/React Native components. You may think, it could be a hassle to constantly update the reference snapshots as your UI changes. Jest has this process simplified for you. You would just need to run one command to update the snapshots and the new reference snapshot replaces the old one.

Here is more information from the official blog, on snapshot testing using Jest.


Moving to Jest from an existing codebase

Not everyone is starting a new project all the time. In reality, if you are on an existing codebase with another testing framework and would like to migrate to Jest, it is quite simple.

  • If you are on Jasmine or Mocha, Jest is compatible with these frameworks and the migration is simple.
  • For other frameworks, you can use the codemods to transform your tests automatically.

Migrating existing tests with jest-codemods

Install the third party plugin, jest-codemods. It can be used to handle all the work to migrate these tests.

yarn global add jest-codemods

To transform your existing tests, navigate to the project containing the tests and run:

jest-codemods


Who is using Jest?

Jest is used today by many fortune 500 companies to test their products.

It was originally developed by Facebook and has been open sourced for the community to use and contribute to.

Facebook, Twitter, Airbnb, Instagram, Spotify, and many more big players and small startups are all using this framework to test their products that are written in JavaScript.

The state of JavaScript 2018 survey, shows that Jest is the most popular and widely used testing framework for JavaScript. And about 39.6% of the developers have used it and would use it again.

https://2018.stateofjs.com/testing/overview/

Jest is a solid testing framework and I highly recommend that you give it a shot.

If you liked this article, do share and spread the word.

Thanks for reading

Follow us on Facebook | Twitter

Learn More

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

What JavaScript Framework You Should Learn to Get a Job in 2019?

10 JavaScript Charting Libraries for Every Data Visualization Need

18+ JavaScript Libraries for Creating Beautiful Charts

3 JavaScript libraries to replace jQuery

Prototype-based Inheritance and Prototype chain in JavaScript (ES5)

A Beginner’s Guide to JavaScript’s Prototype

What is prototype in Javascript?

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Suggest:

Here are 380 Ivy League courses you can take online right now for free

Most Popular JavaScript Frameworks 2019 - I'm Programmer

Building a Video Blog with Gatsby and Markdown (MDX)

How to check if Checkbox is Checked or not using Plain JavaScript

A Beginner Guide To Node.js (Basic Introduction To Node.js)

How to create Restful CRUD API with Node.js MongoDB and Express.js