DEV Community

Cover image for Debugging Mocha tests in vscode 🧪
Marcos Henrique
Marcos Henrique

Posted on

22 4 1

Debugging Mocha tests in vscode 🧪

Brief introduction


Software testing is an action to assess the functionality of a software application and its quality with the intention of finding out whether or not the developed software meets the specified requirements and identifying defects to ensure that the product is free from defects to produce the quality product.

What is Mocha? It's just a coffee drink?

No, in this context Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.

Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases, you can see more here.

So, How can I debug my tests in vscode?

The simplest thing in the world.

Vscode already comes with debug extension by default in latests versions, you just need to click in the "prevent bug" icon or a "bug with play" icon, after this click on cogwheel icon and select configure or fix launch.json.

Now you can see a file named launch.json opened, then you'll paste these lines on its file



{
    "version": "0.2.0",
    "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
      "args": [
        "--require",
        "esm",
        "--require",
        "${workspaceFolder}/your-test-folder/your-setup.js",
        "--reporter",
        "dot",
        "--slow",
        "5000",
        "--colors",
        "${workspaceFolder}/your-test-folder/**/*.spec.js",

      ],
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": [
        "<node_internals>/**"
      ]
    },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/yourNodeIndex.js"
        }
    ]
}



Enter fullscreen mode Exit fullscreen mode

The first configuration is the abrakadabra ✨ for debugging mocha tests in vscode, the second is the most commom configuration for debugging node.js applications, if you aren't familiariazed with this see this video:

After the configuration you can see something like that on run section:

Without tests: 🤬
With tests: 🧘🏾‍♂️

🍻

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (2)

Collapse
 
yaireo profile image
Yair Even Or

Tons of missing information. Your launch.json file is only a template and you did not specify which lines requires changes for a specific project structure :/

Also the video you've places in the article is not related to Mocha tests.

Collapse
 
fadeevab profile image
Alexander Fadeev

Thank you, good man, for launch.json template for mocha!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️