Javascript 如何使用Karma&；调试JS单元测试；Intellij或Webstorm中的茉莉花

我试图调试用Jasmine编写并由Karma运行的JS单元测试。运行测试时，如何在Intellij中的测试中设置断点？如何执行单个测试

这是我的Intellij用于执行Karma测试的运行配置

下面是我的单元测试示例

import {
    RouterTestingModule
} from '@angular/router/testing';
import {
    async,
    TestBed,
    ComponentFixture
} from '@angular/core/testing';
import { provideRoutes, Routes, RouterModule } from '@angular/router';
import { Component } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';

@Component({
    selector: 'as-test-cmp',
    template: '<div class="title">Hello test</div>'
})
class TestRouterComponent {
}

let config: Routes = [
    {
        path: '', component: TestRouterComponent
    }
];

describe('AppComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                TestRouterComponent,
                AppComponent,
                NavbarComponent
            ],
            imports: [ RouterTestingModule, RouterModule ],
            providers: [ provideRoutes(config) ]
        });
    });

    it('should have title Hello world', async(() => {
        TestBed.compileComponents().then(() => {
            let fixture: ComponentFixture<AppComponent>;
            fixture = TestBed.createComponent(AppComponent);
            fixture.detectChanges();

            let compiled = fixture.debugElement.nativeElement;
            expect(compiled).toBeDefined();
            // TODO: find a way to compile the routed component
            // expect(compiled.querySelector('div.title')).toMatch('Hello world');
        });
    }));
});

---

您可以在浏览器上调试。只需单击DEBUG按钮，找到您的类并在任何需要的地方添加断点。要再次运行它，只需刷新页面。

上述答案是正确的，但在此之前，您必须安装chrome扩展，然后您可以在WebStorm中调试。

我知道在执行Karma时如何执行。我希望能够在IDE中进行调试，就像在其他语言中调试一样。要执行单个测试，应该使用“fit”而不是“it”。目前这是唯一的方法，因为业力加载整个文件。如果你只想运行一个套件，那么你可以使用“fdescribe”。你知道怎么做吗？我面临着完全相同的问题，我尝试过的一切都不起作用。能做到这一点似乎是正常的期望。

module.exports = function (config) {
    var gulpConfig = require('../gulp/config')();

    /**
     * List of npm packages that imported via `import` syntax
     */
    var dependencies = [
        '@angular',
        'lodash',
        'rxjs',
        'moment'
    ];

    var configuration = {
        basePath: '../../',

        frameworks: ['jasmine'],
        browsers: ['PhantomJS'],
        reporters: ['progress', 'coverage'],

        preprocessors: {},

        // Generate json used for remap-istanbul
        coverageReporter: {
            dir: 'report/',
            reporters: [
                {type: 'json', subdir: 'report-json'}
            ]
        },

        files: [
            'node_modules/core-js/client/shim.min.js',
            'node_modules/zone.js/dist/zone.js',
            'node_modules/zone.js/dist/long-stack-trace-zone.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/moment/moment.js'
        ],

        // proxied base paths
        proxies: {
            // required for component assests fetched by Angular's compiler
            "/src/": "/base/src/",
            "/app/": "/base/src/app/",
            "/node_modules/": "/base/node_modules/"
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true
    };

    configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
    configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
    configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];

    var files = [
        gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
        gulpConfig.src + 'systemjs.conf.js',
        'config/test/karma-test-shim.js',
        createFilePattern(gulpConfig.tmpApp + '**/*.js', {included: false}),
        createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.html', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.css', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.ts', {included: false, watched: false}),
        createFilePattern(gulpConfig.tmpApp + '**/*.js.map', {included: false, watched: false})
    ];

    configuration.files = configuration.files.concat(files);

    dependencies.forEach(function (key) {
        configuration.files.push({
            pattern: 'node_modules/' + key + '/**/*.js',
            included: false,
            watched: false
        });
    });

    if (process.env.APPVEYOR) {
        configuration.browsers = ['IE'];
        configuration.singleRun = true;
        configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
    }

    config.set(configuration);

    // Helpers
    function createFilePattern(path, config) {
        config.pattern = path;
        return config;
    }
}
module.exports = function (config) {
    var gulpConfig = require('../gulp/config')();

    /**
     * List of npm packages that imported via `import` syntax
     */
    var dependencies = [
        '@angular',
        'lodash',
        'rxjs',
        'moment'
    ];

    var configuration = {
        basePath: '../../',

        frameworks: ['jasmine'],
        browsers: ['PhantomJS'],
        reporters: ['progress', 'coverage'],

        preprocessors: {},

        // Generate json used for remap-istanbul
        coverageReporter: {
            dir: 'report/',
            reporters: [
                {type: 'json', subdir: 'report-json'}
            ]
        },

        files: [
            'node_modules/core-js/client/shim.min.js',
            'node_modules/zone.js/dist/zone.js',
            'node_modules/zone.js/dist/long-stack-trace-zone.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/moment/moment.js'
        ],

        // proxied base paths
        proxies: {
            // required for component assests fetched by Angular's compiler
            "/src/": "/base/src/",
            "/app/": "/base/src/app/",
            "/node_modules/": "/base/node_modules/"
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true
    };

    configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
    configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
    configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];

    var files = [
        gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
        gulpConfig.src + 'systemjs.conf.js',
        'config/test/karma-test-shim.js',
        createFilePattern(gulpConfig.tmpApp + '**/*.js', {included: false}),
        createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.html', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.css', {included: false}),
        createFilePattern(gulpConfig.app + '**/*.ts', {included: false, watched: false}),
        createFilePattern(gulpConfig.tmpApp + '**/*.js.map', {included: false, watched: false})
    ];

    configuration.files = configuration.files.concat(files);

    dependencies.forEach(function (key) {
        configuration.files.push({
            pattern: 'node_modules/' + key + '/**/*.js',
            included: false,
            watched: false
        });
    });

    if (process.env.APPVEYOR) {
        configuration.browsers = ['IE'];
        configuration.singleRun = true;
        configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
    }

    config.set(configuration);

    // Helpers
    function createFilePattern(path, config) {
        config.pattern = path;
        return config;
    }
}