问在Angular中运行Jasmine和Karma时出现CORS错误

EN

使用--sourcemaps=false运行测试，您将获得正确的错误消息。

这是一个问题：https://github.com/angular/angular-cli/issues/7296

另外，速记：

ng test -sm=false

从angular 6开始，命令是：

ng test --source-map=false

我不认为这是CORS的问题，除非你真的在跨域调用一些东西。

在代码中设置日期的组件返回类似的错误时，我也遇到了类似的问题。您可能没有在测试中设置某些所需的值，或者没有在正确的位置调用fixture.detectChanges()。

尝试在运行npm test (或ng test)时将--source-map标志设置为false，实际上可能会得到一个更有意义的错误。

除了错误消息之外，发布受影响的代码通常是一个好主意。

干杯，阿尔贝托

我得到了一个失败的完整测试夹具。查看控制台日志，它包含以下错误消息：

CORS策略已阻止从源'http://localhost:9876‘对位于’ng:/CompanyVehicleGridComponent.js‘的XMLHttpRequest的

访问:仅以下协议方案支持跨域请求: http、data、chrome、chrome-extension、chrome-untrusted、https。

我在Angular 11应用程序中使用PrimeNG控件。我使用的是一个显示和删除行的PrimeNG网格。然后在网格中，点击create and edit按钮将弹出一个PrimeNG模式对话框。我发现这种组件组合是一个有趣的测试挑战。下图说明了网格组件：

<!-- File: company-vehicle-grid.component.html -->
<div *ngIf='companyvehicles !== undefined'>
    <p-table id='companyvehicles-grid' [value]='companyvehicles'
        [totalRecords]='totalRecords' dataKey='VehicleId'
        [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>

        ...

    </p-table>
</div>
<!-- modal edit windows -->
<app-company-vehicle-detail-window [companyvehicle]='windowCompanyVehicleInput'
    (closeWin)='closeWin($event)'></app-company-vehicle-detail-window>
...
<!-- End of company-vehicle.grid.component.html -->

这个错误出现在网格测试结构中。运行以下tesing指令：

ng test --source-map=false

无济于事。我删除了company-vehicle-detail-window，错误消失了，显示问题是由模式对话框窗口中的更改引起的。在实现PrimeNG模式对话框的过程中，我更改了一些导致错误的服务调用，需要将它们添加到网格测试的模拟间谍服务中，以便模式对话框可以通过构造函数和ngOnInit。

此外，我计划更改的一件事是，当我开发详细信息窗口时，我将describe设置为将测试限制为仅测试一个结构，如下所示：

fdescribe( 'CompanyVehicleDetailWindowComponent', ( ) => {

现在我将设置网格，以便同时测试网格表单，这样我就可以在进行更改时看到错误。