What is Unit Testing in Javascript?
JavaScript unit testing allows you to test small, self-contained units of JavaScript code, which are part of a web page or web application. There are two key concepts in JavaScript unit testing:
- Test framework—can import some JavaScript code, invoke it, and test if it works properly.
- Test case—a specific test that checks if a unit of code is working properly. Tests are organized into test suites.
- Test runner—runs test cases in the browser to see how the unit under test behaves.
Popular JavaScript unit testing frameworks include Jest, Mocha, and Jasmine. We’ll show how to run a simple unit test without a full framework, and how to test your code using Jest.
In this article:
- Quick Tutorial #1: Unit Test Your JavaScript Code Without a Framework [DIY]
- Quick Tutorial #2: JavaScript Unit Testing Tutorial with Jest
- JavaScript Security Unit Testing with Bright Security
Quick Tutorial #1: JavaScript Unit Testing Without a Framework [DIY]
While there are many JavaScript unit testing frameworks, it is useful to build a unit test yourself, without any framework, to get a good grasp of the mechanisms involved. Our discussion below is based on the excellent tutorial by Amit Gupta.
Step 1: Create simple test framework
Create a test.js file and implement the it function.
In test frameworks like Jasmine, the it function allows you to run a piece of code, observe its output, and see if it matches the expected output. Here we will implement this function ourselves. It takes two parameters:
desc—description of the test casefn—function to test
Here is the code:
(function(){
'use strict';
function it(desc, fn) {
try {
fn();
console.log(desc);
} catch (error) {
console.log('n');
console.log(desc);
console.error(error);
}
}
})();
Add a simple test assertion. This assertion checks if an expression is true, and if not, throws an error:
function assert(isTrue) {
if (!isTrue) {
throw new Error();
}
}
Step 2: Create test runner
Next, we’ll create a test.html file which will be our test runner. All it does is run test.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Runner</title>
</head>
<body>
<div id="selector"></div>
<script src="test.js"></script>
</body>
</html>
Step 3: Running a test
In the test.js file, we’ll add the following test:
it('should fail', function() {
assert(1 !== 1);
});
Because 1 is equal to 1, this test will always fail. To see that our assertion works properly, run test.html in your Chrome browser, open Developer Tools and switch to the Console tab. You should see the message should fail and immediately after it, an error. In a real test, this will allow you to see what caused the code to fail and debug the issue.
Now add the following test, which should always pass:
it('should pass', function() {
assert(1 === 1);
});
Refresh the test runner in the browser, and look at the console. It will show the message should pass.
Related content: Read our guide to unit testing examples
Quick Tutorial #2: JavaScript Unit Testing Tutorial with Jest
Jest is an open-source JavaScript-based testing framework primarily used for React and React Native-based web applications. It can be difficult to run unit tests in a software front end, due to complex, time-consuming configuration. The Jest framework can greatly reduce this complexity.
Jest also provides a package assertion library, a test runner, and a built-in mock library. It can be used with a variety of JavaScript frameworks including Angular, Vue.js, Node.js, Babel, and TypeScript. Apart from unit testing you can also use Jest to:
- Validate almost anything against JavaScript, especially browser rendering of web applications.
- Run automated browser testing.
Related content: Read our guide to unit testing frameworks (coming soon)
Let’s see how to run a simple unit test with Jest.
Step 1: Set Up the Environment
To set up a simple test environment, create a new project using npm init -y and install Jest as a development dependency for npm:
npm install --save-dev jest
Add this script to package.json to be able to run your tests from the command line:
"scripts": {
"test": "jest"
}
Step 2: Create Sample File
Create a new file under src/example.js and set it to export the function:
function example(a, b) {
return a + b;
}
module.exports = example;
Learn more in our detailed guide to unit testing best practices.
Step 3: Create a Test File
Save this file and open test/example.js. Jest automatically finds the test you want to run in the test/ directory. This file serves as a companion to the example.js file and defines a set of tests to verify that all functions are working correctly.
A basic Jest test looks like this:
test('Description', () => {
expect(functionName(args)).toBe(result);
});
By default, the test() function wraps all the code in the test. Each expect() block calls a function (a unit) and passes its value to a “matcher”. In this case, the matcher is a toBe() function that checks for equality.
Jest has a variety of matchers, all of which you can read about in the documentation.
Step 4: Try a Test on the Example Function
The following block runs two basic tests on our example function:
const example = require('../src/example');
test('testing simple additions', () => {
expect(doSomeMath(1, 1)).toBe(2);
expect(doSomeMath(2, 2)).toBe(4);
});
Step 5: Run the Test
To execute your test, run this command:
npm run test
This will run all test suites and print the results of each test suite.
If the math works, everything should pass. If it fails, Jest will provide a detailed description of the problem and help track it down.
Step 6: Use a Loop to Test Multiple Values
Here is how to use a for loop to call expect multiple times by iterating over the input. If the expected execution fails, the test itself also fails:
test('checking multiple addition values', () => {
  for (let a = 1; a < 10; a++) {
   expect(doSomeMath(a, 5)).toBe(a + 5)
  }
});
Related content: Read our guide to unit testing in angular.
Security Unit Testing with Bright
Bright is a developer-first Dynamic Application Security Testing (DAST) scanner, the first of its kind to integrate into unit testing, revolutionizing the ability to shift security testing even further left. You can now start to test every component / function at the speed of unit tests, baking security testing across development and CI/CD pipelines to minimize security and technical debt, by scanning early and often, spearheaded by developers. With NO false positives, start trusting your scanner when testing your applications and APIs (SOAP, REST, GraphQL), built for modern technologies and architectures. Sign up now for a free account and read our docs to learn more.
