预期['/']为['/'] - 它们看起来一样

Question

我正在尝试测试路由器插座.

我最初有:

expect(landingPageLink).toBe('/', '1st link should go to landing page');

我收到了这个错误:

错误:预期['/']为'/','第一个链接应该登陆'.

所以改成了这个:

expect(landingPageLink).toBe(['/'], '1st link should go to landing page');

现在我收到这个错误:

错误:预期['/']为['/'],'第一个链接应该转到目标网页'.

在底部错误中它们看起来相同.怎么会不一样？

全面测试:

import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';

import {
    ComponentFixture,
    TestBed,
    async,
    fakeAsync
} from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import {
    DebugElement,
    Component,
    ViewChild,
    Pipe,
    PipeTransform,
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Router, RouterOutlet, RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { NavbarComponent } from './shared/subcomponents/navbar.component';
import { AppComponent } from './app.component';
import { RouterLinkStubDirective } from './router-stubs';
import { click } from './test/utilities.spec';

describe('AppComponent', () => {
    let appComponent: AppComponent;
    let navComponent: NavbarComponent;
    let appFixture: ComponentFixture<AppComponent>;
    let navFixture: ComponentFixture<NavbarComponent>;
    let debugElement: DebugElement;
    let element: HTMLElement;
    let linkDes: any;
    let links: any;
    let landingPageLink: any;
    let profileLink: any;
    let aboutLink: any;
    let findLink: any;
    let addLink: any;
    let registerLink: any;

    beforeAll(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
            platformBrowserDynamicTesting());
    });

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

    beforeEach(() => {
        appFixture = TestBed.createComponent(AppComponent);
        navFixture = TestBed.createComponent(NavbarComponent);
        appComponent = appFixture.componentInstance;
        navComponent = navFixture.componentInstance;
        // trigger initial data binding
        appFixture.detectChanges();
        navFixture.detectChanges();

        // find DebugElements with an attached RouterLinkStubDirective
        linkDes = navFixture.debugElement
            .queryAll(By.directive(RouterLinkStubDirective));

        // get the attached link directive instances using the DebugElement injectors
        links = linkDes
            .map((de: any) => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
        landingPageLink = links[0].linkParams;
        profileLink = links[1].linkParams;
        aboutLink = links[2].linkParams;
        findLink = links[3].linkParams;
        addLink = links[4].linkParams;
        registerLink = links[5].linkParams;
    });

    it('can get RouterLinks from template', () => {
        expect(links.length).toBe(6, 'should have 6 links');
        expect(landingPageLink).toBe(['/'], '1st link should go to landing page');
        expect(profileLink).toBe('/profile', '2nd link should go to Heroes');
        expect(aboutLink).toBe('/about', '3rd link should go to Heroes');
        expect(findLink).toBe('/find', '4th link should go to Heroes');
        expect(addLink).toBe('/add', '5th link should go to Heroes');
        expect(registerLink).toBe('/register', '6th link should go to Heroes');
    });

    it('can click find link in template', () => {
        expect(profileLink.navigatedTo).toBeNull('link should not have navigated yet');
        profileLink.triggerEventHandler('click', null);
        appFixture.detectChanges();
        expect(profileLink.navigatedTo).toBe('/find');
    });
});

Answer 1

为什么你的第一次尝试失败

['/']是一个包含一个元素的数组,字符串:'/'.

'/' 是一个文字字符串.

Jasmine的toBe()匹配器与之比较===,不是==,所以你的第一次比较相当于['/'] === '/',总是失败.

为什么你的第二次尝试失败

你无法直接比较两个数组===; 结果总是错误的.所以,你的第二次比较,相当于['/'] === ['/'],也失败了.

修复

而不是toBe使用toEqual,进行深度比较.这意味着它可以比较数组和对象以检查它们的元素是否相等.例:

expect(landingPageLink).toEqual(['/'], '1st link should go to landing page');

所有这些都记录在"包含的匹配器"部分中,但不是非常清楚.