Сгенерированный тест не пройден, когда компонент модульного тестирования внутри библиотеки - PullRequest
Новая
       40

Сгенерированный тест не пройден, когда компонент модульного тестирования внутри библиотеки

2 голосов
/ 27 марта 2019

Мой проект был создан с использованием 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)

Я уже пытался импортировать zone.js в spec-файлы, импортировать модули, удалять асинхронные, перезагружать среду тестирования перед каждым тестом, но все терпит неудачу с некоторыми различнымиошибка.Я должен также упомянуть, что я использую компоненты ясности от 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.Что мне здесь не хватает?

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Я только что столкнулся с той же проблемой.

Использование Nrwl's Nx для создания нового приложения и библиотеки "feature-shell" (шаблон проектирования, предложенный Nx " EnterpriseAngular Monorepo Patterns"книга), меня также смутило, почему мои модульные тесты 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
        }
      }
    }
  }
}

Надеюсь, что однострочник тоже подойдет вам!

0 голосов
/ 28 марта 2019

Я нашел решение!

Проблема заключалась в том, что jest не был настроен из коробки при создании рабочей области nx.Поэтому я предпринял следующие шаги, чтобы все заработало:

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.Запустите тест библиотеки

Finnaly, вы можете запустить свой тест и, надеюсь, он пройдет. 

ng test my-library

Надеюсь, что это кому-нибудь поможет.

...