预期 [ '/' ] 为 [ '/' ] - 它们看起来相同

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,"，但不是很清楚。