Testing JavaScript Applications

Writing good tests is generally not as obvious as people think, as it is not always clear what would make a good test case. Some of the questions that you might have to answer are; What should I test? How should I test? Are my tests easily readable and understandable by others? These and many are some of the questions you might need to answer when writing tests.

This article aims at helping Javascript developers understand what tests are, their significance and suitable frameworks for different kinds of tests.

What are Tests?

A test suite is an application that helps check and verifies your application or code is working as intended. Tests are mainly composed of assertions about how your code will execute, and are run quickly and routinely by continuous integration (C.I) tools.

Why Tests?

  1. Prevents Regression — Regression is a phenomenon where your website, without you meaning to, goes back to a previous state that is usually worse off than its current state.
  2. Provides Objective Success Criteria — By writing tests in advance, and then having your application code pass them, you can objectively say that the application has succeeded once all unit tests pass.
  3. Facilitates complex, modular application — Helps to ensure functionality of components in large applications.

Different Kinds of Tests, and Javascript Test Runners

  1. Unit Test: Tests a single function or service — Mocha / Jest
  2. Component Test: Tests a single component (for functionality)— Jest / Enzyme
  3. Snapshot Test: Tests a single component (for regression) — Jest
  4. End-to-End Test: Tests interaction between multiple components — Protractor / Cypress

Different Javascript testing frameworks / Test runners

The JavaScript testing framework is a dynamic framework based on JS, which is well known for its ease of use in both frontend and backend development. This article will be talking about some of the most popular JavaScript test runners, while laying more emphasis on Jest.

Mocha

Mocha JS has been one of the most popular Javascript testing frameworks since 2011. It operates on Node.js and provides compatibility for both frontend and backend asynchronous testing. With firm documentation support, Mocha has proven to be a well-established framework over the past few years.

Hosted on Github, Mocha is recognized for its flexibility, and as a result, it has proven to be one of the most depended upon libraries among Javascript developers.

Key benefits of Mocha

  • Provides Flexibility for both frontend and backend testing
  • Node.js debugger is supported which makes error tracing easier
  • Accurate reporting
  • Provides support for all browsers including the headless Chrome library
  • Very convenient framework for the developers to write test cases

Test Running with Mocha

Jest

Jest is a modern and widely-adopted test runner developed by FaceBook. It was developed to work with React.js. It is similar to Mocha, but with a host of additional features. Familiarity with jest versions is important as some of the APIs may vary.

Key benefits of Jest

  1. Compatible with Node.js, React.js, Angular, Vue.js and other Babel Scripts.
  2. Standard syntax with documentation support.
  3. Very fast and highly performant.
  4. Managing tests with larger objects is possible using live snapshots.

How Jest works in practice

  1. Scripts are written that kickoff the developer development cycle when project is run, and this script triggers the jest watcher (the watcher automatically watches for changes in the file, and notifies the developer in real time to know if they’ve broken any components). The watcher script could be written by Software Developers or Dev Ops Engineers.
  2. Another script is run by the continuous integration (C.I) software that has already been integrated into the development cycle. This script runs jest.
  3. Meanwhile, senior developers are constantly reviewing the test, and test coverage reports, to ensure that the apps are running and effective.
  4. If all goes well, the end user would be unaware that jest is being used. They only get to know that the application works like it is intended.

Jest Skillset

Junior Developers:

  • Understand the proper use of “describe/it” or “suite/test” blocks, and how you can use them to structure your tests so that it can be readable by others.
  • Understand which tests protect against regression and wrong functionality, and which are just “window dressing” i.e tests that just look good, but do nothing.
  • Have practical strategies for resolving regression scenarios (not just disabling the test, or updating the snapshot).
  • Write good, robust tests that properly utilise the existing APIs.

Senior Developers:

  • Understand how to configure Jest via CLI arguments and the configuration file (understand all the features of jest, and the ones that make sense for their application).
  • Be able to package the correct Jest configurations into NPM scripts for usage by C.I and junior developers.
  • Be able to analyse code coverage reports and test output in order to advise management.
  • Write tests that go beyond snapshots and truly verify the core functionality.

Common Jest Pitfalls

As the common saying goes, if you ask the guy selling encyclopaedias whether you need an encyclopaedia, he‘d say “Yes of Course“. Hence, merely reading through the jest documentation would not help you determine if it fits your use case and those are decisions you might have to make as there are pitfalls that go along with using jest. Some of these which are:

  1. Tests are simply not written.
  2. Jest is not integrated with version control.
  3. No integration with Deployment / C.I
  4. Tests do not protect against critical errors.

Test running with Jest

  • Installation
  • Running Jest

Or

For watch mode

NB: Note that thread completes after test execution

  • Creating test files

Any files inside a folder named __tests__, or named “.spec.js/.test.js” are considered tests.

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Component’s output.

Enzyme is created by Airbnb, and adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.

Setting up Enzyme

Installation and Configuration

Note: `enzyme-to-json` provides a better component format for snapshot comparison than enzyme’s internal component representation. `snapshotSerializer` allows you to minimize code duplication when working with snapshots.

Creating Test files

  • Create a setupTests.js file at ./src/setupTests.js and add the following:
  • Running enzyme Tests : To use enzyme with custom assertions and convenience functions for testing your React components, you can consider using:

Conclusion

Tests can be plugged into a C.I before deployment or you can even use husky to run it as a pre-commit hook, so your code won’t even make it into the repository if it breaks something. We can now safely deploy our JavaSCript applications knowing nothing will break. Or in case it does, we still have a chance to fix it before it reaches users.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store