使用 Jasmine 和 Webpack 对 Angularjs 进行单元测试，错误未知提供者

Question

我想问如何解决这个错误，它不会让我写任何测试。 这是我要测试的 Angularjs 工厂（service.es6）：

import Rx from 'rxjs/Rx'
var TheMiddleModule = angular.module('TheMiddleModule', [])
TheMiddleModule.factory('TheMiddleOp', function ($http){
  var api = 'someUrl'
  var TheMiddleOp = {}

  TheMiddleOp.getSsoidFromService = () => {
     return Rx.Observable.fromPromise(
        $http({
            method: 'GET',
            url: api
        })
     )
   }

   return TheMiddleOp
})

这是我的测试 webpack 配置：

var JasmineWebpackPlugin = require('jasmine-webpack-plugin');
module.exports = {
  entry: ['./app/scripts/test/service.js'],
  plugins: [new JasmineWebpackPlugin()],
  output: {
      path: __dirname,
      filename: 'test.js'
  },
  module: {
      loaders: [
      {
          test: /\.es6$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel?presets[]=es2015!eslint-loader'
      },
      {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel?presets[]=es2015!eslint-loader'
      }
  ]
  }
 }
};

这是我的 js 测试文件：

import 'angular';
import 'angular-mocks';
import '../services/service.es6';

var service;

describe('service test', function() {
    var $httpBackend, $httpProvider;
    var module = angular.mock.module();
    var url = 'someUrl';

    beforeEach(function () {

        module('TheMiddleModule');

        inject(function ( _$httpBackend_, _TheMiddleOp_) {
            $httpBackend = _$httpBackend_;
            service = _TheMiddleOp_;

            $httpBackend.when('POST', url)
            .respond(200, {'sso-id':'test'});
        });
    });

    it('$httpBackend should be defined', function (){
        expect($httpBackend).toBeDefined();
    });

    it('TheMiddleOp should be defined', function (){
        expect(service).toBeDefined();
    });

    it('should call the ssoid service', function (){
        var getFromService = service.getSsoidFromService()
        getFromService.subscribe(
            (response) => {},
            (e) => {},
            () => {
                $httpBackend.expectGET(url);
                $httpBackend.flush();
            }
        )
    });

    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });
});

茉莉给我的错误是：

Error: [$injector:unpr] Unknown provider: TheMiddleOpProvider <- TheMiddleOp

如果我评论该行：

service = _TheMiddleOp_;

当然，$httpBackend 测试正确通过，而其他测试失败。 我还尝试在没有任何导出的情况下导入 service.es6，仅将模块作为默认导出并具有更多组合。 提前感谢您能给我的任何帮助。

Answer 1

您的模块似乎没有定义。因为工厂已注册到该模块。所以错误在模块定义中。

如果我可以猜到，可能有三件事是错误的：

var module = angular.mock.module();

为什么需要这个？为什么不在每个之前写 angular.mock.module 呢？

angular.mock.module('TheMiddleModule');

另一个选项是您的工厂和变量的选择。我的建议改写如下：

angular.module('TheMiddleModule', [])
  .factory('TheMiddleOp', function ($http){
    var api = 'someUrl';

    return {
     getSsoidFromService = () => {
        return Rx.Observable.fromPromise(
          $http({
            method: 'GET',
            url: api
        });
     )
    };
  });

最后一个选项是你的 webpack 配置错误。但是您可以调试您的测试，您将其配置为不是 singleRun；

最后一条评论，单元测试本身并没有测试任何东西；并删除检查 $httpBackend 是否存在，因为您的测试角度模拟正在工作？