Previously, in part 1, we’ve covered how to initialize ReactJS project with Webpack. In this part, we’re going to shed the light on Front-End Unit Test with Karma.

Unit Test (UT) is a way of testing a unit – the smallest piece of code that is written for a function. It can write first, later or at the same time with the main code depending on the method option of project. To learn more about Unit Test, we will cover some concepts:

Some concepts of UT

  • Unit Test: Basics of Unit Test.
  • Mocha: test framework helps to write, run UT and see UT results. Especially, this framework allows you to integrate such tools as mocking, assertion, etc. easily.
  • Chai: a library helps to create assertions while writing UT.
  • Spy, Stub and Mock: methods to create virtual data, virtual functions, virtual services, etc. for the input of test case. Learn more about Sinon.
  • Enzyme: a tool to write UT for React Component.
  • JSDom: a browser simulator with many limitations. However, it’s faster than real browsers, like Chrome and Firefox. Front-end UT frameworks are often integrated with this library when running tests.
  • Karma: Test Runner supports running UT on different REAL Browsers, report, debug, etc.

Some examples of UT

Unit Test is a piece of code aiming to test functions and verify results.

Example 1:

You want to write a function to print the word “Hello World”. Writing UT is among methods to verify this function without testing it.

UT ensures the code runs correctly before moving on to other phases, such as Manual test and Deployment that usually take a lot of time to fix the errors.

Example 2:

There are 2 phases in your project: Code+UT and Manual Test (by Tester team). Assuming that while coding A(), you couldn’t detect all the errors in the function because the UT is written carelessly.

Consequently, at the Manual Testing phase, the Tester detects and reports bug on the system, then POs and PMs assess and assign it to you to fix it. Therefore, it takes a lot of time to solve that bug compared to the time of writing UT.

After few years, those who maintain your product can use UT to write a new function without damaging the existing function.

UT is to test cases that are difficult to detect in the real environment. With UT, you can create dummy code and fake data to test functions instead of waiting for real data to see how it works.

Example 3:

Every 24 hour, parameters in your application will be reset to the default values. In such cases, UT is the essential tool to test whether the application runs properly in the real environment quickly.

Example 4:

Your project is developed by 3 people at the same time with 3 different functions.

Func 1: Get input information.

Func 2: Process logic of input information.

Func 3: Save information to the DB.

These 3 functions are in a sequence. So how do you develop Func 2 without being affected by the progress and output of Func 1? UT is one of the methods to solve the problem. You can create fake Func 1 data to test Func 2 to ensure the Func 2 runs properly.

However, with UT, it takes about 10-25% extra time to do a task. You should remember the number and estimate your time to avoid OT, ON and deadline missing.

Why “Front-End Unit Test with Karma”?

1. You need to know that: web applications run on browsers and the application itself consists of a lot of code for browser. Therefore, UT has to run on browsers instead of on the Framework in Back-End.

2. Front-End UT Framework (UT-F) does not integrate UT running on browser. It is possible to configure UT-F to run with different browsers, but it’s not easy and takes a lot of time. Therefore, the solution for this problem is Karma. Karma is a powerful library that helps UT run with different browsers, reports UT results and supports debug code.

Install Unit Test with Karma 

Install UT Framework

Install Karma libraries

  • Karma, Karma-cli: The main library of Karma.
  • *-laucher: Help run UT on such browsers as Chrome, Firefox, etc.
  • puppeteer: Google Chromium kit.

Project configuration

  • Add this line to webpack.config.js so you can see the original source code when debugging in the DEV environment. See Devtool for other values.
  • Add new file karma.conf.js in the root directory of $PROJECT_HOME. This is the main configuration file to run Karma.
  • Add scripts to package.json
  • test: to run UT with Karma.
  • test-normal: to run UT in pure Node environment. Do not upload the code to any browser. Most test cases will fail.

Prepare the source code

You can get the source from here to experience.

Run test with Karma


Run pure test 

  • This configuration proves that Front-End UT has to run on Browser.Result:


You need to adjust the parameters in the file karma.conf.js

Then run the test with Karma as usual:

  • Turn on your browser and access: http://localhost:9876/debug.html
  • F12/Inspect to enter DEV mode of Browser.
  • ^ + P: Enter the name of the UT file you want to debug.
  • Set the Breakpoints line you want to debug.
  • Refresh to restart UT.

Your debug screen looks like this:


We’ve learned more about Unit Test. Hopefully, you will no longer feel uncomfortable when writing Unit Test. Good luck! Stay tune.

Tran Huu Lap – FPT Software
Source CodeLearn

Related posts: