开玩笑测试失败 - 测试组件创建时返回未定义

Question

我正在 Jest 中编写测试以确认组件已创建，我正在使用 Angular。但是，当我运行测试和状态时，它会返回 undefined：

OrderDetailsDeliveryTabComponent › 应该创建

expect(received).toBeTruthy()

Received: undefined

我已将相关模块导入到测试中，并且我相信我正确地将组件调用到测试中。

我之前没有遇到过这个错误

    import { ComponentFixture } from '@angular/core/testing';
    import { NO_ERRORS_SCHEMA } from '@angular/core';
    import { OrderDetailsDeliveryTableComponent } from './order-details- 
    delivery-table.component';
    import { ConfigureFn, configureTests, MockOrderDetailsService} from 
    '@lib/testing';
     import { OrderDetailsService } from '@c3services/order-editing/order-details.service';

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

     beforeEach(async () => {
        const configure: ConfigureFn = testBed => {
        testBed.configureTestingModule({
          declarations: [OrderDetailsDeliveryTableComponent],
          providers: [{ provide: OrderDetailsService, useValue: 
          MockOrderDetailsService }],
          schemas: [NO_ERRORS_SCHEMA]
        });
      };

    const testBed = await configureTests(configure);
    fixture = testBed.createComponent(OrderDetailsDeliveryTableComponent);
    component = fixture.componentInstance;
    component.associatedExistingDespatchData = [
      {
        item: 'CS119NVP30F',
        quantity: 1,
        despatched: '04-08-2017 05:57',
        method: 'Standard',
        trackingNumber: '',
        deliveryAddress: '14 Beetham Court',
        returnsTrackingNumber: '',
        fromLocation: 'Tackbrook Wahrehouse',
        service: 'UK',
        type: 'D',
        reference: '160501255D0001'
     }
      ];
        fixture.detectChanges();
     });
     it('should create', () => {
      expect(component).toBeTruthy();
     });
  });

我希望 it 语句返回 true。

组件是这个：

import { AssociatedExistingDespatch } from 
'./../../../models/OrderDetails.model';
import { Component, OnInit } from '@angular/core';
import { TableColumn, TextAlignment, DataType } from 
'@sharedModels/TableData.interface';
import { Subscription } from 'rxjs';
import { OrderDetailsService } from '@c3services/order-editing/order-details.service';

type AssociatedExistingDespatchData = {
deliveryAddress: string;
despatched: string;
fromLocation: string;
item: string;
quantity: number;
method: string;
reference: string;
returnsTrackingNumber: string;
service: string;
trackingNumber: string;
type: string;
};

  const emptyDespatchNote = [
 {
    deliveryAddress: '',
    despatched: '',
    fromLocation: '',
    item: '',
    quantity: null,
    method: '',
    reference: '',
    returnsTrackingNumber: '',
    service: '',
    trackingNumber: '',
    type: ''
 }
 ];

@Component({
  selector: 'order-details-delivery-table',
  templateUrl: './order-details-delivery-table.component.html',
  styleUrls: ['./order-details-delivery-table.component.css']
})
export class OrderDetailsDeliveryTableComponent implements OnInit {
associatatedExistingDespatchesSubscription: Subscription[] = [];
loadingDetails: boolean;
orderDetailsDeliveryData: AssociatedExistingDespatch[];
associatedExistingDespatchData: AssociatedExistingDespatchData[] = emptyDespatchNote;

  constructor(public orderDetailsService: OrderDetailsService) {}

  ngOnInit() {
     this.associatatedExistingDespatchesSubscription.push(
     this.orderDetailsService.orderDetails.subscribe(({ loadingDetails, data }) => {
     this.loadingDetails = loadingDetails;
       if (!loadingDetails && data) {
          this.orderDetailsDeliveryData = 
          this.orderDetailsService.getAssociatedExistingDespatches(data);
       } else {
         this.orderDetailsDeliveryData = emptyDespatchNote;
       }
     })
   );
  }

   orderDetailsDeliveryHeader: TableColumn[] = [
 { value: 'item', label: 'Item', columnWidth: '100px' },
 {
   value: 'quantity',
   label: 'Qty',
   columnWidth: '35px',
   textAlign: TextAlignment.Center
},
{
  value: 'despatched',
  label: 'Despatched',
  type: DataType.Date,
  columnWidth: '100px'
 },
 {
   value: 'method',
   label: 'Method',
   columnWidth: '95px'
 },
 { value: 'trackingNumber', label: 'Tracking No.', columnWidth: '100px' },
 {
   value: 'deliveryAddress',
   label: 'Delivery Address',
   columnWidth: '150px'
 },
 {
   value: 'returnsTrackingNumber',
   label: 'Returns Tracking No.',
   columnWidth: '130px'
  },
  { value: 'fromLocation', label: 'From Location', columnWidth: '150px' },
  { value: 'service', label: 'Service', columnWidth: '90px' },
  { value: 'type', label: 'Type', columnWidth: '40px' },
   { value: 'reference', label: 'Reference', columnWidth: '120px' }
];
}

Answer 1

你没有调用compileComponents()，你可以试试这个：

 beforeEach(async () => {
    const configure: ConfigureFn = testBed => {
    testBed.configureTestingModule({
      declarations: [OrderDetailsDeliveryTableComponent],
      providers: [{ provide: OrderDetailsService, useValue: 
      MockOrderDetailsService }],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  };