Angular2单元测试Karma [web-server]：404：/css/PageGridStyle.css

Question

尝试使用Karma和Jasmine在Angular 2中进行单元测试。 Karma（或webpack？）似乎无法加载我的CSS文件。我需要CSS文件才能工作，所以我可以测试我的组件。

这是我的Karma配置......

module.exports = function(config) {
    config.set({
        basePath: '',

        frameworks: ['jasmine'],

        files: [
            'src/tests/tests.ts',
            'src/tests/Routing.spec.ts'
        ],

        exclude: [
        ],

        preprocessors: {
            'src/tests/tests.ts': ['webpack'],
            'src/tests/Routing.spec.ts': ['webpack', 'sourcemap']
        },

        mime: {
            'text/x-typescript': ['ts','tsx']
        },

        webpack: {
            devtool: 'inline-source-map',

            resolve: {
                extensions: ['', '.ts', '.js']
            },

            module: {
                loaders: [
                    {
                        test: /\.js$/,
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015']
                        }
                    },
                    {
                        test: /\.ts$/,
                        loaders: ['awesome-typescript-loader']
                    }
                ]
            }
        },

        webpackMiddleware: {
            // webpack-dev-middleware configuration
            noInfo: true
        },

        plugins: [
            require("karma-webpack"),
            require("karma-jasmine"),
            require("karma-chrome-launcher"),
            require("karma-sourcemap-loader"),
            require("karma-spec-reporter")
        ],

        reporters: ['spec'],

        port: 9876,

        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],

        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
    });
};

我收到了这些错误：

Failed: Uncaught (in promise): Failed to load css/PageGridStyle.css

Failed: This test module uses the component PageGridComponent which is using a "templateUrl" or "stylesUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.

这是我的实际测试（所以你可以看到我正在调用TestBed.compileComponents）：

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

describe('component: DetailsComponent', function () {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                CommonModule,
                RouterModule,
                SharedModule,
                RouterTestingModule.withRoutes([
                    { path: 'benefits/details', component: DetailsComponent },
                    { path: '', component: HomeComponent }
                ])
            ],
            declarations: [
                HomeComponent,
                DetailsComponent
            ]
        });
    });

    beforeEach(async(() => {
        TestBed.compileComponents();
    }));

    it('Home should auto nav to Profile Details', async(inject([Router, Location], (router: Router, location: Location) => {
        let detailsComponent = TestBed.createComponent(DetailsComponent);
        detailsComponent.detectChanges();

        //fixture.debugElement.query(By.css('a')).nativeElement.click();
        detailsComponent.whenStable().then(() => {
            expect(location.path()).toEqual('/benefits/details');
            console.log('after expect');
        });
    })));

});

这是我的组成部分：

@Component({
    template: `
    <div>
        <page-grid [PageConfig]="_page"></page-grid>
    </div>
    `
})
export class DetailsComponent {
    private _page;
    constructor() {
        this._page = DetailsQuestions;
    }
}

PageGridComponent（带有CSS文件的那个）

@Component({
    selector: 'page-grid',
    template: `
    <div>
        ...
    </div>
    `,
    styleUrls: ['./css/PageGridStyle.css']
})
export class PageGridComponent {
    ...
}

TL; DR

Karma无法加载CSS文件。那么发生了什么？为什么我的CSS文件没有加载？