Comments

Getting Started With Jest – Testing is Fun

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.

“Quality is never an accident; it is always the result of intelligent effort.” – John Ruskin

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?

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.

Jest

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

Jest is a solid testing framework and I highly recommend that you give it a shot. In the meantime if you are new to JavaScript, I recommend you take Mosh’s course on JavaScript.

If you are looking for a solid course on React, Mosh has that covered too.

If you liked this article, do share and spread the word. We will see you again with more on JavaScript.

Adhithi Ravichandran is a Senior Software Engineer based in Kansas City. She is currently working on building mobile apps using React Native for critical healthcare scenarios. Adhithi is a regular conference speaker at various tech conferences. Adhithi graduated with a Masters degree in Computer Science from the University of Kansas and has been in the tech industry for over 7 years. She has worked on several technologies over the years, and one of her recent favorite is React Native.
Tags: , , ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts