Jasmine 为 Angular 2 单元测试提供了无法读取 null 的属性“getXHR" [英] Jasmine gives Cannot read property 'getXHR' of null for Angular 2 unit test

问题描述

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

I have found many examples online of unit testing Angular 2 with a http call. However when I make my own test and run it Jasmine it gives me an error:

http Http .request() 应该接受一个完全限定的请求作为它的唯一参数

失败:无法读取 null 的属性getXHR"

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) => {});
           }));

         });
       });
     });

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

Any thoughts what I am doing wrong here?

推荐答案

您当前 (beta.1) 需要在 Angular 2 中运行单元测试之前设置 BrowserDomAdapter.

You currently (beta.1) need to set the BrowserDomAdapter before running a unit test in Angular 2.

1. 使用 karma-test.shim.js

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

That can be done by adding karma-test.shim.js to your project, which contains the appropriate initialization:

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

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

Note that this should be done for you if you are using angular-cli.

1. 直接在单元测试中

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

Or directly in the unit test, by adding an import:

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

然后设置 DOM Adapter

And later setting the DOM Adapter

BrowserDomAdapter.makeCurrent();

这篇关于Jasmine 为 Angular 2 单元测试提供了无法读取 null 的属性“getXHR"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！