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

Contents

1 NullInjectorError: R3InjectorError(DynamicTestModule)[Router -> Router]またはNullInjectorError: R3InjectorError(DynamicTestModule)[ActivatedRoute -> ActivatedRoute]
2 NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> HttpClient -> HttpClient]
3 NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> FormBuilder -> FormBuilder]
4 NullInjectorError: R3InjectorError(DynamicTestModule)[TestService -> DatePipe -> DatePipe]
5 NullInjectorError: R3InjectorError(DynamicTestModule)[MatDialog -> MatDialog]
6 NullInjectorError: R3InjectorError(DynamicTestModule)[MatDialogRef -> MatDialogRef]:
7 NullInjectorError: R3InjectorError(DynamicTestModule)[InjectionToken MatDialogData -> InjectionToken MatDialogData]:
8 NullInjectorError: R3InjectorError(DynamicTestModule)[MatSnackBar -> MatSnackBar]
9 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’.’
10 Error: NG0301: Export of name ‘matMenu’ not found!. Find more at https://angular.io/errors/NG0301
11 ERROR: ‘NG0303: Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’.’
12 ERROR: ‘NG0303: Can’t bind to ‘mat-dialog-close’ since it isn’t a known property of ‘a’.’
13 ERROR: ‘NG0303: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.’
14 ERROR: ‘NG0303: Can’t bind to ‘dataSource’ since it isn’t a known property of ‘table’.’
15 ERROR: ‘NG0303: Can’t bind to ‘matBadge’ since it isn’t a known property of ‘mat-icon’.’
16 ERROR: ‘NG0304: ‘mat-icon’ is not a known element:
17 ERROR: ‘NG0304: ‘mat-divider’ is not a known element:
18 ERROR: ‘NG0304: ‘mat-checkbox’ is not a known element:
19 ERROR: ‘NG0304: ‘mat-datepicker’ is not a known element:
20 ERROR: ‘NG0304: ‘mat-tab’ is not a known element:
21 ERROR: ‘NG0304: ‘mat-spinner’ is not a known element:
22 ERROR: ‘NG0304: ‘mat-select-trigger’ is not a known element:
23 ERROR: ‘NG0304: ‘app-xxx’ is not a known element:
24 Error: Found the synthetic listener @translateTab.start. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.
25 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.
26 Error: No value accessor for form control with name: ‘xxx’
- 26.1 mat-radio-groupの場合
- 26.2 mat-selectの場合
- 26.3 mat-checkboxの場合
- 26.4 contenteditableを使用している場合
27 ngx-markdown
- 27.1 ERROR: ‘NG0303: Can’t bind to ‘xxx’ since it isn’t a known property of ‘x’.’
- 27.2 NullInjectorError: R3InjectorError(DynamicTestModule)[MarkdownService -> MarkdownService]:またはNullInjectorError: R3InjectorError(DynamicTestModule)[MarkdownService -> InjectionToken SECURITY_CONTEXT -> InjectionToken SECURITY_CONTEXT]:

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

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

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

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

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

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

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

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

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

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’.’

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

mat-radio-groupの場合

mat-selectの場合

mat-checkboxの場合

contenteditableを使用している場合

ngx-markdown

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

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

コメントを残す コメントをキャンセル

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

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’.’

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

コメントを残すコメントをキャンセル