Jasmine 为 Angular 2 单元测试提供了无法读取 null 的属性“getXHR”

Question

我在网上找到了许多使用 http 调用对 Angular 2 进行单元测试的示例。但是，当我进行自己的测试并运行它 Jasmine 时，它​​给了我一个错误：

http Http .request() should accept a fully-qualified request as its only parameter

Failed: Cannot read property 'getXHR' of null

import {
  afterEach,
  beforeEach,
  ddescribe,
  describe,
  expect,
  iit,
  inject,
  injectAsync,
  it,
  xit
} from "angular2/testing";
import {Injector, provide} from "angular2/core";
import {MockBackend, MockConnection} from "angular2/src/http/backends/mock_backend";
import {
  BaseRequestOptions,
  ConnectionBackend,
  Request,
  RequestMethod,
  RequestOptions,
  Response,
  ResponseOptions,
  URLSearchParams,
  JSONP_PROVIDERS,
  HTTP_PROVIDERS,
  XHRBackend,
  JSONPBackend,
  Http,
  Jsonp
} from "angular2/http";
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";

describe("http", () => {
    let url = "http://foo.bar";
    let http: Http;
    let injector: Injector;
    let backend: MockBackend;
    let baseResponse;
    let jsonp: Jsonp;
    beforeEach(() => {
      injector = Injector.resolveAndCreate([
        BaseRequestOptions,
        MockBackend,
        provide(
            Http,
            {
              useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
                return new Http(backend, defaultOptions);
              },
              deps: [MockBackend, BaseRequestOptions]
            }),
        provide(
            Jsonp,
            {
              useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
                return new Jsonp(backend, defaultOptions);
              },
              deps: [MockBackend, BaseRequestOptions]
            })
      ]);
      http = injector.get(Http);
      jsonp = injector.get(Jsonp);
      backend = injector.get(MockBackend);
      baseResponse = new Response(new ResponseOptions({body: "base response"}));
    });

    afterEach(() => backend.verifyNoPendingRequests());

    describe("Http", () => {

      describe(".request()", () => {
        it("should return an Observable",
           () => { expect(http.request(url)).toBeAnInstanceOf(Observable); });


        it("should accept a fully-qualified request as its only parameter",
           inject([injectAsync], (async) => {
             backend.connections.subscribe(c => {
               expect(c.request.url).toBe("https://google.com");
               c.mockRespond(new Response(new ResponseOptions({body: "Thank you"})));
               async.done();
             });
             http.request(new Request(new RequestOptions({url: "https://google.com"})))
                 .subscribe((res) => {});
           }));

         });
       });
     });

有什么想法我在这里做错了吗？

Answer 1

您目前（beta.1）需要在 Angular 2 中运行单元测试之前设置 BrowserDomAdapter。

1. 使用 karma-test.shim.js

这可以通过将karma-test.shim.js 添加到您的项目中来完成，其中包含适当的初始化：

System.import('angular2/src/platform/browser/browser_adapter')
.then(function(browser_adapter) {
  browser_adapter.BrowserDomAdapter.makeCurrent();
})

请注意，如果您使用的是angular-cli，则应为您完成此操作。

1. 直接在单元测试中

或者直接在单元测试中，通过添加导入：

import {BrowserDomAdapter} from 'angular2/src/platform/browser/browser_adapter';

稍后设置 DOM 适配器

BrowserDomAdapter.makeCurrent();