如何在Visual Studio Code中集成Chutzpah测试运行器及Unit Test Explorer？

Hey there! I’ve gone through the process of setting up Chutzpah with VSCode for Angular projects, so let’s walk through this step by step—including getting it integrated with the Unit Test Explorer.

Step 1: Install Required Tools & Extensions #

First, let’s get the necessary pieces in place:

• Install the Chutzpah Test Adapter extension: Head to the VSCode Extensions marketplace, search for Chutzpah Test Adapter, and install it. This is the key extension that connects Chutzpah to VSCode’s built-in Unit Test Explorer.
• Set up Chutzpah CLI: You’ll need the Chutzpah command-line tool. Install it globally via npm with npm install -g chutzpah, or locally to your project with npm install chutzpah --save-dev (local install is recommended for project-specific version control).

Step 2: Configure Chutzpah for Your Angular Project #

Chutzpah needs a configuration file to understand how to handle your Angular tests. Create a chutzpah.json file in your project root, and paste in this base configuration (adjust paths if needed for your Angular version/project structure):

{
  "Framework": "jasmine",
  "TestHarnessReferenceMode": "Static",
  "TestHarnessLocationMode": "SettingsFileAdjacent",
  "References": [
    { "Path": "./node_modules/core-js/client/shim.min.js" },
    { "Path": "./node_modules/zone.js/dist/zone.js" },
    { "Path": "./node_modules/zone.js/dist/async-test.js" },
    { "Path": "./node_modules/zone.js/dist/jasmine-patch.js" },
    { "Path": "./node_modules/@angular/core/bundles/core.umd.js" },
    { "Path": "./node_modules/@angular/common/bundles/common.umd.js" },
    { "Path": "./node_modules/@angular/compiler/bundles/compiler.umd.js" },
    { "Path": "./node_modules/@angular/platform-browser/bundles/platform-browser.umd.js" },
    { "Path": "./node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js" },
    { "Path": "./node_modules/jasmine-core/lib/jasmine-core/jasmine.js" },
    { "Path": "./node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js" },
    { "Path": "./node_modules/jasmine-core/lib/jasmine-core/boot.js" }
  ],
  "Tests": [
    { "Path": "src", "Include": "*.spec.ts" }
  ],
  "Compile": {
    "Mode": "External",
    "Extensions": [".ts"],
    "ExtensionsWithNoOutput": [".d.ts"]
  }
}

A quick breakdown of this config:

• We’re using Jasmine (the default test framework for Angular)
• We’ve included all the Angular and Jasmine dependencies Chutzpah needs to run tests
• We tell Chutzpah to scan the src directory for all .spec.ts files
• We set Compile: External because Angular already handles TypeScript compilation via the CLI—Chutzpah doesn’t need to recompile files

Step 3: Connect to the Unit Test Explorer #

Once you have the extension installed and your chutzpah.json set up:

1. Restart VSCode to ensure the extension activates properly
2. Click on the Test Explorer icon in the left sidebar (looks like a beaker)
3. If tests don’t show up automatically, open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run Test Explorer: Refresh Tests

You should now see all your Angular unit tests listed in the explorer! You can run individual tests, entire test suites, and view pass/fail results directly in VSCode—just like you would with other test runners.

Troubleshooting Tips #

• If tests fail to run, try executing a test directly via the CLI first: chutzpah run ./src/app/app.component.spec.ts. This will help you confirm if the issue is with Chutzpah itself or the VSCode integration.
• Double-check the paths in chutzpah.json—if your Angular dependencies are in a different location (like a monorepo), you’ll need to adjust these paths.
• If you’re using a newer Angular version, some bundle paths might have changed—verify the correct bundle locations in your node_modules folder.

内容的提问来源于stack exchange，提问作者karruma