【Angular】コンポーネントのユニットテストを通るようしたときのメモ

Contents

Angularのプロジェクトにおいて、spec.tsの中身が全て下記になっており
テストが全然通っていなかったものを修正していく作業があったので、そのときのメモ

※ ここでは、あくまでテストを通るようにするだけの修正を加えただけです

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

import { TestComponent } from './test.component';

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

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

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

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

スポンサードサーチ

NullInjectorError: R3InjectorError(DynamicTestModule)[Router -> Router]
または
NullInjectorError: R3InjectorError(DynamicTestModule)[ActivatedRoute -> ActivatedRoute]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { RouterTestingModule } from '@angular/router/testing';

import { TestComponent } from './test.component';

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
+     imports: [ RouterTestingModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> HttpClient -> HttpClient]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { HttpClientTestingModule } from '@angular/common/http/testing';

import { TestComponent } from './test.component';

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
+     imports: [ HttpClientTestingModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  }));

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> FormBuilder -> FormBuilder]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { ReactiveFormsModule } from '@angular/forms';

import { TestComponent } from './test.component';

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
+     imports: [ ReactiveFormsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> DatePipe -> DatePipe]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { DatePipe } from '@angular/common';

import { TestComponent } from './test.component';

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
+     providers: [
+       DatePipe
+     ],
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[MatDialog -> MatDialog]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatDialogModule } from '@angular/material/dialog';

import { TestComponent } from './test.component';

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

  beforeEach(async () => {
    TestBed.configureTestingModule({
+     imports: [ MatDialogModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[MatDialogRef -> MatDialogRef]:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatDialogRef } from '@angular/material/dialog';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
+     providers: [
+       {
+         provide: MatDialogRef,
+         useValue: { }
+       },
+     ]
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[InjectionToken MatDialogData -> InjectionToken MatDialogData]:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MAT_DIALOG_DATA } from '@angular/material/dialog';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
+     providers: [
+       {
+         provide: MAT_DIALOG_DATA,
+         useValue: { }
+       },
+     ]
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[MatSnackBar -> MatSnackBar]

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatSnackBar } from '@angular/material/snack-bar';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
+     providers: [
+       {
+         provide: MatSnackBar,
+         useValue: { }
+       },
+     ]
    }).compileComponents();
  });

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

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

Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
または
ERROR: ‘NG0303: Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.’

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ FormsModule, ReactiveFormsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

Error: NG0301: Export of name ‘matMenu’ not found!. Find more at https://angular.io/errors/NG0301

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatMenuModule } from '@angular/material/menu';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatMenuModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0303: Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’.’

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ FormsModule, ReactiveFormsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0303: Can’t bind to ‘mat-dialog-close’ since it isn’t a known property of ‘a’.’

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatDialogModule } from '@angular/material/dialog';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatDialogModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0303: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.’

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { FormsModule }   from '@angular/forms';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ FormsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0303: Can’t bind to ‘dataSource’ since it isn’t a known property of ‘table’.’

<table mat-table [dataSource]="xxx">
  ......
</table>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatTableModule } from '@angular/material/table';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatTableModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0303: Can’t bind to ‘matBadge’ since it isn’t a known property of ‘mat-icon’.’

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatBadgeModule } from '@angular/material/badge';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatBadgeModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-icon’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatIconModule } from '@angular/material/icon';
+ import { MatIconTestingModule } from '@angular/material/icon/testing';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatIconModule, MatIconTestingModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-divider’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatDividerModule } from '@angular/material/divider';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatDividerModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-checkbox’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatCheckboxModule } from '@angular/material/checkbox';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatCheckboxModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-datepicker’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatDatepickerModule } from '@angular/material/datepicker';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatDatepickerModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-tab’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatTabsModule } from '@angular/material/tabs';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatTabsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-spinner’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatProgressSpinnerModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘mat-select-trigger’ is not a known element:

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatSelectModule } from '@angular/material/select';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatSelectModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ERROR: ‘NG0304: ‘app-xxx’ is not a known element:

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

import { TestComponent } from './test.component';
+ import { xxxComponent } from 'src/app/xxx.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
-     declarations: [ TestComponent ],
+     declarations: [ TestComponent, xxxComponent ],

    }).compileComponents();
  });

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

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

Error: Found the synthetic listener @translateTab.start. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.

import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ BrowserAnimationsModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDatepickerModule } from '@angular/material/datepicker';
+ import { MatNativeDateModule } from '@angular/material/core';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
      imports: [
        MatDatepickerModule,
+       MatNativeDateModule
      ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

Error: No value accessor for form control with name: ‘xxx’

mat-radio-groupの場合

<mat-radio-group formControlName="xxx">
  <mat-radio-button *ngFor="let xxx of xxxs" [value]="value">{{ value }}
</mat-radio-button>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatRadioModule } from '@angular/material/radio';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatRadioModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

mat-selectの場合

<mat-select formControlName="xxxx">
  <mat-option *ngFor="let xxx of xxxs" [value]="xxx">
    {{ xxx }}
  </mat-option>
</mat-select>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatSelectModule } from '@angular/material/select';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatSelectModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

mat-checkboxの場合

<mat-checkbox formControlName="xxx">
  xxx
</mat-checkbox>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MatCheckboxModule } from '@angular/material/checkbox';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MatCheckboxModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

contenteditableを使用している場合

<form [formGroup]="form">
  <div [contenteditable]="true" formControlName="xxx"></div>
</form>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { ContenteditableModule } from '@ng-stack/contenteditable';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ ContenteditableModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

ngx-markdown

ERROR: ‘NG0303: Can’t bind to ‘xxx’ since it isn’t a known property of ‘x’.’

<div markdown [data]="data"></div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
+ import { MarkdownModule } from 'ngx-markdown';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
+     imports: [ MarkdownModule ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

NullInjectorError: R3InjectorError(DynamicTestModule)[MarkdownService -> MarkdownService]:
または
NullInjectorError: R3InjectorError(DynamicTestModule)[MarkdownService -> InjectionToken SECURITY_CONTEXT -> InjectionToken SECURITY_CONTEXT]:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MarkdownModule } from 'ngx-markdown';

import { TestComponent } from './test.component';

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

  beforeEach(async() => {
    TestBed.configureTestingModule({
-     imports: [ MarkdownModule ],
+     imports: [ MarkdownModule.forRoot() ],
      declarations: [ TestComponent ],
    }).compileComponents();
  });

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です