Debugging Jest Tests with Chrome Developer Tools

 1.Debugging Jest Tests with the Salesforce Extensions.

2.Debugging Jest Tests with Chrome Developer Tools.

3.Debugging Jest Tests with VSCode debugger advanced configuration.

To debug Jest unit test, we need to modify package.json.

{

    "scripts": {

        "test:unit": "sfdx-lwc-jest",

        "test:unit:watch": "sfdx-lwc-jest --watch",

        "test:unit:debug": "sfdx-lwc-jest --debug",

        "test:unit:coverage": "sfdx-lwc-jest --coverage"

    }

}

Note :

"test:unit" runs all your tests.

"test:unit:watch" and "test:unit:debug" run jest in watch and debug mode.

"test:unit:coverage" collect coverage and display in output

Run Tests on the Command Line :

1.npm run test:unit

2.npm run test:unit:debug -- helloConditionalRendering

Debug Mode In browser

Debug mode lets you easily debug your jest tests.

1.Put a debugger; into your code.

2.Open chrome://inspect

3.Run sfdx-lwc-jest with the --debug flag.

Pass other parameters to jest after the -- flag.

ex: sfdx-lwc-jest --debug -- --no-cache