Angular 유닛 테스트에 서비스를 주입할 때 알 수 없는 공급자가 발생하는 오류

Angular 유닛 테스트에 서비스를 주입할 때 알 수 없는 공급자가 발생하는 오류

저는 Angular를 처음 접하는 사람이고 Stack Overflow에 대한 유사한 질문을 모두 검토했지만 도움이 되는 질문은 없었습니다.모든 것이 올바르게 설정되어 있다고 생각합니다만, 유닛 테스트에 서비스를 삽입하려고 하면, 아직 「Unknown Provider」에러가 표시됩니다.아래에 코드를 정리했습니다.누군가 명백한 오류를 발견할 수 있기를 바랍니다.

모듈을 별도의 .js 파일로 다음과 같이 정의합니다.

angular.module('dashboard.services', []);
angular.module('dashboard.controllers', []);

여기서 Eventing Service라고 하는 서비스를 정의합니다(간단하게 하기 위해 로직을 삭제).

angular.module('dashboard.services').factory('EventingService', [function () {
    //Service logic here
}]);

Eventing Service를 사용하는 컨트롤러는 다음과 같습니다(실행시 모두 정상적으로 동작합니다).

angular.module('dashboard.controllers')
    .controller('Browse', ['$scope', 'EventingService', function ($scope, eventing) {
        //Controller logic here
}]);

다음은 유닛 테스트입니다.유닛 테스트 실행 시 에러의 원인이 되는Eventing Service를 삽입하려고 하는 행입니다.

describe('Browse Controller Tests.', function () {
    beforeEach(function () {
        module('dashboard.services');
        module('dashboard.controllers');
    });

    var controller, scope, eventingService;

    beforeEach(inject(function ($controller, $rootScope, EventingService) {
        scope = $rootScope.$new();
        eventingService = EventingService

        controller = $controller('Browse', {
            $scope: scope,
            eventing: eventingService
        });
    }));


    it('Expect True to be True', function () {
        expect(true).toBe(true);
    });
});

테스트를 실행하면 다음 오류가 나타납니다.

오류: 알 수 없는 공급자:Eventing Service Provider <- Eventing Service>

Jasmine specrunner.html 파일에 필요한 소스 파일이 모두 포함되어 있는지 확인합니다(이것은 Asp입니다).넷 MVC 프로젝트):

<!-- Include source files here... -->
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>  
<script type="text/javascript" src="@Url.Content("~/Scripts/angular-mocks.js")"></script>                 

<script type="text/javascript" src="@Url.Content("~/App/scripts/app.js")"></script>                       <!-- Angular modules defined in here -->
<script type="text/javascript" src="@Url.Content("~/App/scripts/services/eventing.js")"></script>         <!-- My Eventing service defined here -->


<script type="text/javascript" src="@Url.Content("~/App/scripts/controllers/browse.js")"></script>        <!-- My Browse controller defined here -->

<!-- Include spec files here... -->
<script type="text/javascript" src="@Url.Content("~/App/tests/browse.js")"></script>                      <!-- The actual unit test here -->

Angular가 왜 Eventing Service에 대해 불평하는지 이해할 수 없습니다.컨트롤러는 런타임에 정상적으로 동작합니다.테스트를 하려고 했을 때 에러가 발생하고 있기 때문에 조롱/주입에 문제가 있는 것은 아닌지 궁금합니다.

시험에 대한 Angular 도움은 헛소리이기 때문에 현재로선 곤란합니다.누구라도 도움을 주거나 제안을 해주시면 감사하겠습니다.감사해요.

방금 이 문제에 부딪혀 $injector를 사용하여 명시적으로 서비스를 받는 것으로 문제를 해결했습니다.

var EventingService, $rootScope;
beforeEach(inject(function($injector) {
  EventingService = $injector.get('EventingService');
  $rootScope = $injector.get('$rootScope');
}));

이게 왜 효과가 있는지, 왜 간단한지 말해줄 수 있으면 좋겠다.

beforeEach(inject(function(EventingService) {   ....  }));

내부를 조사할 시간이 없어요항상 하나의 코딩 스타일을 사용하고 이를 고수하는 것이 가장 좋습니다.

이 스타일은 테스트에서 사용하는 변수의 이름이 서비스의 올바른 이름이라는 점에서 더 좋습니다.하지만 그것은 좀 장황하다.

$rootScope와 같은 이상한 변수 이름을 사용하는 또 다른 각도 매직 기능이 있지만, 나는 그것의 진부한 외관을 좋아하지 않는다.

대부분의 경우 모듈이 포함되어 있지 않기 때문에 이 오류가 발생합니다.

beforeEach(module('capsuling'));
beforeEach(module('capsuling.capsules.services'));

아래에 되어 있는 경우)dashboard.controllers은 다른 모듈에 포함된 서비스에 합니다.dashboard.services모듈 시그니처의 의존관계 모듈을 참조할 필요가 있습니다.

angular.module('dashboard.services', []);
angular.module('dashboard.controllers', ['dashboard.services']);

이 질문은 꽤 오래되었지만, 저는 이 문제와 유사한 문제를 해결하는 데 상당한 시간을 허비했습니다.

Error: Unknown provider: SomeServiceProvider <- SomeService

따라서 이 문제에 대한 또 다른 가능한 원인을 여기에 남깁니다.그게 누군가에게 도움이 됐으면 좋겠어요.

제 경우 프로젝트에서는 이름은 같지만 종속성이 다른 두 개의 모듈을 만들었습니다. 즉, 다음과 같은 두 개의 다른 .js 파일이 생성되었습니다.

angular.module('moduleName', [dependencies]))

각도 문서에서:

인수를 하나 전달하면 기존 각도가 검색됩니다.모듈. 단, 복수의 인수를 전달하면 새로운 각도가 생성됩니다.모듈

결론:테스트에서 주입된 것은 잘못된 종속성을 가진 모듈로 판명되었습니다.잘못 작성된 모듈에서 두 번째 인수를 삭제하면 문제가 해결되었습니다.

다음과 같이 다른 집약 모듈에 의존하는 추가 모듈을 정의해 본 적이 있습니까?

angular.module( 'dashboard', [ 'dashboard.services', 'dashboard.controllers' ] )

따라서 Before에서는 다음과 같이 양쪽 서브모듈이 정의되어 있는1개의 모듈을 지정할 수 있습니다.

describe('Browse Controller Tests.', function () {
    beforeEach(function () {
        module('dashboard');
    });

    var controller, scope, eventingService;

    beforeEach(inject(function ($controller, $rootScope, EventingService) {
        scope = $rootScope.$new();
        eventingService = EventingService

        controller = $controller('Browse', {
            $scope: scope,
            eventing: eventingService
        });
    }));


    it('Expect True to be True', function () {
        expect(true).toBe(true);
    });
});

언급URL : https://stackoverflow.com/questions/15807026/getting-unknown-provider-error-when-injecting-a-service-into-an-angular-unit-tes