Periodically, I return to some aspect of how to easily test JavaScript. It seems every six months or so, new tools are available and new techniques are developed. The goal is always the same, reduce development friction. We all seek greater productivity by making things easier, not more complicated. In this article, I focus on how to easily test JavaScript in the Visual Studio Code editor using Node.js as a JavaScript execution environment. In the spirit of simplicity, this article is intentionally very brief.

In order to work through the examples in this article, you'll need to have Visual Studio Code and Node.js installed on your computer. If you aren't familiar with Visual Studio Code, you can learn about it here: https://code.visualstudio.com/. From there, you can download and install it, and you can use their learning resources to get you up and running. For Node, you can download and install from here: http://nodejs.org.

Step 1: Install the Node Modules Node-Fetch and Make-Runnable

Just as you use NuGet to extend .NET-based applications, you use the Node Package Manager (NPM) to extend node-based applications. The NPM packages employed in this article are node-fetch and make-runnable:

Figure 1: The node-fetch npm package installation.
Figure 1: The node-fetch npm package installation.
  • make-runnable: https://www.npmjs.com/package/make-runnable makes it easy to run exported module functions from the command line. The idea behind this module is to reduce the friction with testing JavaScript modules. With reduced friction comes increased productivity. Figure 2 illustrates the make-runnable installation.
Figure 2: The make-runnable npm package installation.
Figure 2: The make-runnable npm package installation.

Step 2: Let's Write Some JavaScript Code!

Listing 1 illustrates a simple JavaScript module. Line 1 loads the node-fetch module and line 14 loads the make-runnable module. Lines 3-12 represent the exported JavaScript module. For more information on the module, consult this resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules. If you've worked with JavaScript promises in the past, you'll appreciate the code efficiencies with the fetch API.

Listing 1: JavaScript Module

const fetch = require('node-fetch');

module.exports = { 
    
    API: function() {
    
        const url = '<a href="https://jsonplaceholder.typicode.com/todos/1'";>https://jsonplaceholder.typicode.com/todos/1'<;/a>;
        const json =  fetch(url).then(response => response.json());
        return json;
    }
}

require('make-runnable');

Step 3: Testing the Code from the Command Line in VS Code

Figure 3 illustrates how to run the code from within VS Code. You can run the code from any command prompt. The nice thing about Visual Studio Code is that it provides quick access to a PowerShell terminal. The function's return value is echoed to the terminal.

Figure 3: With the make-runnable npm package, JavaScript functions can be run easily under node.js at the command line.
Figure 3: With the make-runnable npm package, JavaScript functions can be run easily under node.js at the command line.

In the real world, our JavaScript functions typically require at least one parameter. Figure 4 illustrates the modified code and how to pass a parameter in the function call.

Figure 4: The make-runnable module makes it easy to pass parameters to JavaScript functions.
Figure 4: The make-runnable module makes it easy to pass parameters to JavaScript functions.

What About Break Points?

No testing or debugging article in the context of a full-featured editor, such as Visual Studio Code, would be complete without the ability to add break points and step through code. The first step to getting break points to trigger is to toggle the auto-attach feature in Visual Studio Code. Figure 5 illustrates how to toggle the setting in the command palette through the Ctrl+Shift+P shortcut.

Figure 5: The command palette in Visual Studio Code is accessed via the ctrl+shift+p shortcut and is the way you access common functions and extensions.
Figure 5: The command palette in Visual Studio Code is accessed via the ctrl+shift+p shortcut and is the way you access common functions and extensions.

Once you've toggled the auto-attached feature, set a break point. Setting breakpoints in Visual Studio Code is done in the same way as it's done in Visual Studio. Figure 6 illustrates setting a breakpoint.

Figure 6: Clicking to your left of the line number toggles the break point for that line.
Figure 6: Clicking to your left of the line number toggles the break point for that line.

Finally, let's run the code and trigger the break point. For the break point to be hit, you must add the ?inspect-brk switch to the node call. The modified call is illustrated in Figure 7.

Figure 7: With the auto attach feature turned on, adding the ?inspect-brk switch to the node call allows set break points to be hit.
Figure 7: With the auto attach feature turned on, adding the ?inspect-brk switch to the node call allows set break points to be hit.

With break points, you can now inspect variables and call stacks to diagnose and fix problems with the code.

Conclusion

That's really is all there is to easily test your JavaScript code in the Visual Studio Code editor. As you can see, if you also need the ability to set break points and step through code, that's a very simple process as well.