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

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');

所有这些都是documented in the section "Included Matchers,"，但不是非常清楚。