angular - 库中的单元测试组件时生成的测试失败

Question

我的项目是使用 nx 原理图创建的，我在库中有一些组件，我想使用 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)

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

这是 .spec 文件:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MyComponent } from './my-component.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

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

我期待在使用 nx 时这应该像预期的那样工作。我在这里缺少什么？

Answer 1

我刚遇到同样的问题。

使用 Nrwl's Nx 搭建一个新的应用程序加上一个“feature-shell”库(Nx 的“Enterprise Angular Monorepo Patterns”一书建议的设计模式)，我也很困惑为什么我的 Angular 组件类的 Jest 单元测试在里面开箱即用apps/ 的，但不是 libs/ 的。

我可能找到了一个更简单的解决方案:

查看工作区根目录中 angular.json 的内部。记下属性 projects.<your-app>.architect.test.options.setupFile 。它的值应该类似于 "apps/<your-app>/src/test-setup.ts"。

对我有用的解决方案是将 angular.json 中的确切属性和值添加到 projects.<your-lib>.architect.test.options 。

示例解决方案

// angular.json
{
  ...
  "projects": {
    "my-app": {
      ...
      "architect": {
        ...
        "test": {
          ...
          "setupFile": "apps/my-app/src/test-setup.ts" // <- This was already here...
        }
      }
    },
    "my-lib": {
      ...
      "architect": {
        ...
        "test": {
          ...
          "setupFile": "apps/my-app/src/test-setup.ts" // <- ...and I just added it here
        }
      }
    }
  }
}

希望单行线也适合您!