Master Javascript from Scratch: Testing JavaScript

Building robust JavaScript applications isn’t just about writing code, it’s about ensuring that code works reliably under all conditions. That’s where testing and debugging come in. These essential practices not only help catch bugs early but also ensure your code is maintainable and scalable.

In this article, we’ll explore:

• Unit Testing: Learn how to set up and write tests using modern frameworks like Vitest, ensuring your functions and components work as expected.
• Debugging Techniques: Master practical tools like console.log(), the debugger keyword, and Chrome DevTools to quickly identify and fix issues in your code.

Whether you’re squashing bugs in a complex app or building confidence in your codebase with automated tests, these skills will take your JavaScript development to the next level. Let’s dive in and make your code bulletproof!

Unit Testing in JavaScript

Unit testing involves testing individual pieces of code, such as functions or methods, to ensure they work as expected. Frameworks like Vitest make writing and running tests easy and efficient.

Setting Up Vitest

Vitest is a fast and lightweight testing framework inspired by Jest. It works seamlessly with modern JavaScript and TypeScript projects.

Installation:

Configuration: Add a test script in your package.json:

Basic Test Example: Create a file mathUtils.test.js in your project:

Run the tests:

Output: Vitest runs the tests and provides feedback:

Mocking and Spying

Mock functions simulate the behavior of real functions to test scenarios in isolation.

Example: Mocking API Calls

Debugging Techniques

Debugging is the process of identifying and fixing errors in your code. Here are practical steps and tools to help:

Using console.log()

The simplest and most common debugging tool. Use console.log() to print variables or function outputs.

Example:

Using the debugger Keyword

The debugger keyword pauses code execution, allowing you to inspect variables and the call stack in the browser's developer tools.

Example:

To use this, open Chrome DevTools (Ctrl + Shift + I / Cmd + Option + I) and go to the Sources tab.

Debugging in Chrome DevTools

Chrome DevTools offers powerful debugging tools:

Breakpoints: Pause execution on specific lines.

• Open the Sources tab.
• Click on the line number to set a breakpoint.
• Reload the page to pause execution.

Watch Expressions: Monitor variable values during execution.

• Add variables to the Watch panel.

Call Stack: View the sequence of function calls leading to the current point.

• Check the Call Stack panel to trace execution paths.

Network Tab: Debug API requests.

• Open the Network tab to inspect HTTP requests and responses.

Debugging Node.js Applications

Use the Node.js debugger to debug server-side applications.

Starting the Debugger:

Open chrome://inspect in Chrome to attach the debugger.

Quick Recap

Unit Testing with Vitest:

• Install and set up Vitest for fast, reliable tests.
• Write tests for functions and mock dependencies when needed.

Debugging Techniques:

• Use console.log() and the debugger keyword for quick insights.
• Leverage Chrome DevTools for advanced debugging.
• Debug Node.js apps with the built-in debugger and Chrome.

Mastering testing and debugging ensures your JavaScript applications are robust, reliable, and easy to maintain, reducing bugs and improving user satisfaction.