當庫內的單元測試組件時生成的測試失敗

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 的 Nx來搭建一個新的應用程序和一個“功能外殼”庫（Nx 的“ 企業 Angular Monorepo 模式”一書中建議的設計模式），我也很困惑為什么我的 Angular 組件類的 Jest 單元測試開箱即用在apps/內部，但不是libs/ 。

我可能找到了一個更簡單的解決方案：

在工作區根目錄中查看angular.json內部。 記下屬性projects.<your-app>.architect.test.options.setupFile 。 它的值應該類似於"apps/<your-app>/src/test-setup.ts" 。

對我angular.json的解決方案是將angular.json中的確切屬性和值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
        }
      }
    }
  }
}

希望單線也適合你！

Answer 2

如果有人在 Angular 11 中使用 Jest 並遇到此問題，那么為我解決的問題是。

確保我的package.json文件中有這兩個屬性。

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
  }
}

setupJest.ts

import 'jest-preset-angular'

還要確保你的笑話配置不包括"testEnvironment": "node", . 我從一個節點項目復制了這個，它也破壞了我的測試。

Answer 3

我找到了解決辦法！

問題是在創建 nx 工作區時，jest 沒有配置開箱即用。 所以我采取了以下步驟使其工作：

1. 安裝jest-zone-patch

npm install jest-zone-patch --save-dev

2. 編輯文件

對於每個庫，您必須編輯 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';

另外，將setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']到庫的jest.config.js文件中，因此它看起來像這樣：

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

並添加jestGlobalMocks.ts在同一文件夾中的文件test-setup.ts文件。 你可以在這里找到它，或者直接復制下面的代碼：

Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

3. 更改規范文件

將生成的規范文件更改為如下所示：

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();
  });
});

這樣，在compileComponents承諾完成后創建組件和夾具，從而避免競爭條件和'should create'單元測試中潛在的未定義錯誤。

4.運行庫測試

最后，你可以運行你的測試，希望它會通過。

ng test my-library

希望這會幫助某人。