Angular 在库中对组件进行单元测试时，生成的测试失败

我的项目是使用nx schematics创建的，我想使用jest.js对库中的一些组件进行单元测试。每个测试都会失败，并出现以下错误：

● MyComponent › should create

    Failed: "Zone is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone.js"

       7 |   let fixture: ComponentFixture<MyComponent>;
       8 | 
    >  9 |   beforeEach(async(() => {
         |   ^
      10 |     TestBed.configureTestingModule({
      11 |       declarations: [ MyComponent ]
      12 |     })

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:41:24)
      at Suite.<anonymous> (libs/componentlib/src/lib/components/my-component/my-component.component.spec.ts:9:3)
      at Object.<anonymous> (libs/componentlib/src/lib/components/my-component/my-component.component.spec.ts:5:1)

  ● MyComponent › should create

    TypeError: Cannot read property 'getComponentFromError' of null

      at TestBedViewEngine._initIfNeeded (../../packages/core/testing/src/test_bed.ts:393:46)
      at TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:594:10)
      at Function.TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:247:36)
      at Object.<anonymous> (libs/componentlib/src/lib/components/my-component/my-component.component.spec.ts:17:23)

  ● MyComponent › should create

    expect(received).toBeTruthy()

    Received: undefined

      21 | 
      22 |   it('should create', () => {
    > 23 |     expect(component).toBeTruthy();
         |                       ^
      24 |   });
      25 | });
      26 | 

      at Object.<anonymous> (libs/componentlib/src/lib/components/my-component/my-component.component.spec.ts:23:23)

● MyComponent›应创建
失败：“async（）测试帮助程序需要区域，但找不到。请确保您的环境包括Zone.js/dist/Zone.js”
7 | let夹具：组件夹具；
8 | 
>9 |每个之前（异步（（）=>{
|   ^
10 | TestBed.configureTestingModule({
11 |声明：[MyComponent]
12 |     })
在Env.beforeach（node_modules/jest-jasmine2/build/jasmineasynchinstall.js:41:24）
在套件中。（libs/componentlib/src/lib/components/my component/my component.component.spec.ts:9:3）
at对象。（libs/componentlib/src/lib/components/my component/my component.component.spec.ts:5:1）
● MyComponent›应创建
TypeError:无法读取null的属性“getComponentFromError”
在TestBedViewEngine._initIfNeeded（../../packages/core/testing/src/test_bed.ts:393:46）
在TestBedViewEngine.createComponent（../../packages/core/testing/src/test_bed.ts:594:10）
位于Function.TestBedViewEngine.createComponent（../../packages/core/testing/src/test\u bed.ts:247:36）
at对象。（libs/componentlib/src/lib/components/my component/my component.component.spec.ts:17:23）
● MyComponent›应创建
expect（已收到）。toBeTruthy（）
收到：未定义
21 | 
22 |它（'应该创建'，（）=>{
>23 | expect（组件）.toBeTruthy（）；
|                       ^
24 |   });
25 | });
26 | 
at对象。（libs/componentlib/src/lib/components/my component/my component.component.spec.ts:23:23）

我已经尝试在spec文件中导入zone.js、导入模块、删除异步、在每次测试之前重置测试环境，但都失败了，出现了一些不同的错误。我还应该提到，我使用的是vmware的clarity组件

以下是.spec文件：

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“/MyComponent.component”导入{MyComponent}；
描述（'MyComponent'，（）=>{
let组分：MyComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[MyComponent]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MyComponent）；
组件=fixture.componentInstance；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

---

我希望在使用nx时，它能像预期的那样工作。我在这里遗漏了什么？

我找到了解决方案

问题在于，在创建nx工作区时，jest没有现成配置。因此，我采取以下步骤使其正常工作：

1.安装

2.编辑文件

import 'jest-preset-angular'

对于每个库，您必须编辑test-setup.ts文件，使其如下所示：

import 'zone.js/dist/zone.js';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';

import 'jest-zone-patch';
import 'jest-preset-angular';
import './jestGlobalMocks';

module.exports = {
  name: 'my-library',
  preset: '../../../jest.config.js',
  coverageDirectory: '../../../coverage/libs/administration/identification',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']
};

另外，将

setupfileafterenv:['/src/test setup.ts']

添加到库的

jest.config.js

文件中，使其看起来像这样：

import 'zone.js/dist/zone.js';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';

import 'jest-zone-patch';
import 'jest-preset-angular';
import './jestGlobalMocks';

module.exports = {
  name: 'my-library',
  preset: '../../../jest.config.js',
  coverageDirectory: '../../../coverage/libs/administration/identification',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']
};

3.更改规范文件

import 'jest-preset-angular'

将生成的等级库文件更改为以下内容：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;

        fixture.detectChanges();
      });
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

希望这能帮助别人。

我刚刚遇到了同样的问题。 为了构建一个新的应用程序加上一个“FeatureShell”库（Nx的“书”中建议的设计模式），我还弄不明白为什么我对角度组件类的Jest单元测试是在

apps/

中进行的，而不是

libs/

我可能找到了一个更简单的解决方案： 查看工作区根目录中的

angular.json

内部。注意属性

projects..architect.test.options.setupFile

。其值应类似于

“apps//src/test setup.ts”

对我有效的解决方案是将

angular.json

中的确切属性和值添加到

projects..architect.test.options

示例解

//angular.json
{
...
“项目”：{
“我的应用程序”：{
...
“建筑师”：{
...
“测试”：{
...
“setupFile”：“apps/my-app/src/test-setup.ts”//如果有人在Angular 11上使用Jest并遇到此问题，那么是什么为我解决了此问题

确保我的
package.json
文件中有这两个属性

{
“笑话”：{
“预置”：“开玩笑预置角度”，
“SetupFileAfterEnv”：[
“/setupJest.ts”
],
}
}

setupJest.ts

import 'jest-preset-angular'

另外，请确保您的jest配置中没有包含
“TestenEnvironment”：“node”，
。我从一个node项目复制了这个配置，它也破坏了我的测试