DEV Community

Cover image for Setup Jest for Angular with Debugging in Visual Studio Code

Setup Jest for Angular with Debugging in Visual Studio Code

David Würfel on December 09, 2019

This article aims to describe a really fast step-by-step way to setup Jest testing for Angular projects including debugging capabilities of Visual...
Read full post
Collapse
 
renanfranca profile image
Renan Franca •

This blog post is so good that I won't leave it outdated!

I am using angular "@angular/core": "14.2.10" and the vscode debug launch.js script stopped working giving the message:
Error: Unknown arguments: testMatch, testPathPattern, runInBand

The problem is that

Support for camel case arguments has been deprecated and will be removed in a future major version.
Use '--run-in-band' instead of '--runInBand'.

Solution

Replace camelCase with kebab-case. Here is the Debug Jest Current File script updated:

        {
            "type": "node",
            "request": "launch",
            "name": "Debug Jest Current File",
            "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
            "cwd": "${workspaceFolder}",
            "args": [
                "test",
                "--test-match=\"**/+(*.)+(spec|test).+(ts|js)?(x)\"",
                "--test-path-pattern=${fileBasenameNoExtension}",
                "--run-in-band"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true
        },
Enter fullscreen mode Exit fullscreen mode

Thank you @mrcube42 for this awesome post!

Collapse
 
sookah profile image
Saujan Ghimire •

Will cypress be better for e2e.

Collapse
 
mrcube42 profile image
David Würfel Angular •

As often, it depends: For example, currently Internet Explorer is not supported. Then you have to go with something Selenium-based like Protractor. The developer experience of Cypress is just amazing; it feels quite natural, powerful and I find it less fragile. Take a look at the official website (cypress.io/) and just give it a try. The initial setup and your first tests should take just a few minutes to hours. You could even use Briegbug's schematic for your Angular project (npmjs.com/package/@briebug/cypress...).

Collapse
 
sookah profile image
Saujan Ghimire •

Thank you for the insight David! I will definitely give cypress a go for my next project and also the schematic :)