时间戳

首页 > 解决方案 > routerLinkActiveOptions 测试

angular - routerLinkActiveOptions 测试

问题描述

我似乎无法弄清楚如何为使用该[routerLinkActiveOptions]指令的组件设置 *.component.spect.ts 文件。我不断收到此错误：

Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'button'.

这是规范文件：

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

import {TranslatePipeMock} from '@common/services/translate/translate.pipe.mock';

import {NavigationComponent} from './navigation.component';

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

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

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

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

标签： angulartypescript

解决方案

如果您想在此组件中测试指令，您可能需要查看https://codecraft.tv/courses/angular/unit-testing/directives/

但是假设您只想对您的组件进行单元测试，您应该在您的 TestBed 设置中设置模式：[NO_ERROR_SCHEMA] - 例如，只需在声明下方添加它

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            RouterTestingModule,
        ],
        declarations: [
            NavigationComponent,
            TranslatePipeMock,
        ],
        schemas: [NO_ERRORS_SCHEMA]
    })
        .compileComponents();
}));

如果您只想测试被测组件的行为，此架构允许编译器忽略丢失的指令或子组件。

发生错误是因为默认情况下单元测试会尝试解决所有使用的问题。由于该指令是在模板中设置的，但在您的 TestBed declerstuons 中找不到，编译器会抱怨。

实际上，官方文档非常详尽地涵盖了https://angular.io/guide/testing

推荐阅读