JavaScript unit testing for .Net developers - Part 1 environment setup and tooling

Introduction

This is a guide to unit testing for developers who are familiar with unit testing already and are used to using tools in a .net environment.

There are quite a few differences in how Javascript does what it does and that can present many gotchas along the way to creating testable code. What I do want to do in this guide is present to you a series of similarities that can be translated to what you are already familiar with.

What we are going to cover in this guide are:

• Environment, tooling and setup.
• Testing and mocking with Jest
• Testing React components
• Testing async methods and Sagas along with the Redux store.

What I won’t be covering in this guide are things which I assume you are already familiar with. These are the triple ‘A’ pattern or arrange, act, assert. Design patterns and SOLID principles. I also won’t be covering how to setup React and Redux, both of these I assume you already have some familiarity with. With React-intl I cover in another post on how to get that setup.

Environment setup and tooling

The code editor that we will be using will be vscode, it’s a wonderful editor and provides virtually all functionality that we need, it has some great extensions and some really great ones recently for unit testing in particular.

Along with vscode we will be using Jest which will act as both our test runner, mocking and unit testing framework. Enzyme which will be used for testing React components and Majestic which is used as a testing UI and makes those familiar with visual studios testing tools breath a sigh of relief.

Setup Jest

Jest ideally should be setup globally you can do this by going to your command line and typing npm install -g jest

Setup Enzyme

Enzyme is an important tool, it allows us to mock react components in memory and query the react virtual dom or convert the react virtual dom into a html dom and query that.

It’s able to do this because underneath the covers Enzyme is a combination of two other powerful Javascript technologies. One is JSDOM (https://github.com/jsdom/jsdom) which can be thought of as an in memory headless browser and the other is Cheerio (https://github.com/cheeriojs/cheerio) which parses, selects and manipulates the Dom. Cheerio selects items in the JSDOM using CSS style selectors.

To install Enzyme, go to your application directory and run the command npm i --save-dev enzyme, along with Enzyme you also need to install the adapter which allows Enzyme to use React, at time of writing React was at version 16. Run the command npm i --save-dev enzyme enzyme-adapter-react-16

Setup Majestic

Jest in itself is a great tool however at the moment you will only be able to run tests on the command line, this is ok for some but if you have a great many tests failing it can be overwhelming to see so many failing unit tests within the command window and try to figure out the problem.

A great tool which gives you a similar experience to a Visual Studio test explorer is Majestic (https://github.com/Raathigesh/majestic).

Majestic allows you to view your tests in a sequential visual way, it can run all the tests in your solution or just selected ones and allows you to navigate to the failed test. It also takes the information on why the unit test failed and presents it in a much more human friendly way. I recommend it’s use.

To install Majestic you need to install it globally, run npm install -g majestic.

Setup Chrome Debugging

The Chrome extension for VSCode should be installed, this extension can attach itself to the Chome dev tools debugger and allow you to debug within VSCode. If you haven’t already done so install this extension.

To be able to debug your application while running you need to modify the launch.json file contained within the “vscode” folder within your solution directory. It can also be found by going to “Debug” (Ctrl+Shift+D) within VSCode and selecting the settings cog which will open the launch.json file. There you must ensure within the configurations property that the following json is there.

"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "https://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "args": ["test", "--runInBand", "--no-cache", "--no-watch"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }

  ]

The first section in the array is telling VSCode that when debugging you are launching your application on localhost on the port 3000 (change as required). The second section is what is needed when you want to debug your unit tests.

Handy VSCode extensions

As well as some of the extensions above some others hat may come in handy along the way are:

• Bracket Pair Colorizer – a visual aid to using many brackets in code.
• GitLens – gives you a similar experience to code lens in Visual Studio and shows you within the code who was the last author.
• Code Spell Checker – spell checking 
• Material Icon Theme – aesthetically pleasing and gives you nice icons.

Summary

So far we have installed a few tools and extensions to VSCode. We have talked about what these tools give you in terms of a similar unit testing and debugging experience to Visual Studio.

In the next episode we are going to really get our feet wet and start unit testing and mocking (yes I did say mocking for JavaScript) with Jest.