Skip to content

Starter project for running + debugging Jest tests in an Angular project. VS Code and Chrome Dev Tools can be used to debug the Jest tests.

Notifications You must be signed in to change notification settings

johncrim/ng-jest-starter

Repository files navigation

Angular Jest Starter Project

This is an Angular starter project using Jest, with support for debugging Jest tests in 2 javascript debuggers: Visual Studio Code and Chrome Developer Tools.

This starter project contains a single library (ui-lib), and no angular apps. It contains both Karma tests (*.karma-spec.ts) and Jest tests (*.spec.ts), but no Protractor or other e2e tests.

This project was created using ng new, then changes were made to use jest-preset-angular; and changes were made to enable VS Code debugging and Chrome debugging. The git history for this project should show a minimal set of changes for adding this developer utility.

Running Tests

Run Jest tests:

yarn test

Run Karma tests:

yarn karma

Run Karma tests in headless mode:

yarn karma:headless

Debugging Jest tests in Visual Studio Code

  1. In VS Code, set breakpoints in a test file or in Angular code - for example, you can add a breakpoint in ui-lib.component.spec.ts and/or ui-lib.component.ts.
  2. Type Ctrl+Shift+D to view the Debug pane, then ensure that "Jest Current File" is selected in the launch configuration.
  3. Open the test file you want to run (eg ui-lib.component.spec.ts)
  4. Hit the F5 key to start debugging.
  5. Wait for your breakpoint(s) to be hit.

Troubleshooting Jest Debugging

Jest caches things aggressively, and while there seems to be some automatic cache invalidation it doesn't work in all cases - particularly changes to libraries or Jest configuration. Therefore, if changes don't seem to be picked up, run yarn test --clearCache to clear the Jest cache.

The other Jest CLI parameters can be used when running yarn test - they are passed directly to jest. For example, you can use yarn test --debug to display information about your Jest configuration.

If your breakpoints aren't being hit, try adding a debugger; statement in the ts file where you want the debugger to break. This will trigger the debugger even if sourcemaps aren't working properly.

For other ideas, see Jest's Troubleshooting page.

About

Starter project for running + debugging Jest tests in an Angular project. VS Code and Chrome Dev Tools can be used to debug the Jest tests.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published