单元测试角度服务，beforeEach注入不执行 [英] unit testing angular service, beforeEach inject doesn't execute

问题描述

我正在尝试使用jasmine / karma为角度服务编写单元测试。我有一个类似的服务测试，工作得很好。但是这个有一些额外的依赖，是在一个不同的模块，只是没有找到注入服务。

I'm trying to write unit tests for an angular service with jasmine/karma. I have a similar service test, which works just fine. But this one has some additional dependencies, is in a different module and just doesn't find the service with the inject.

服务看起来像这样。 bService 位于同一模块中，但 commonFactory 和 commonService 在另一个模块中，比如 commonModule 。

The service looks something like this. bService is in the same module, but commonFactory and commonService are in another module, say commonModule.

(function () {
    'use strict';
     angular
         .module('myService')
         .service('aService', aService);

     aService.$inject = [
         'commonFactory',
         'commonService'
         'bService'
     ];

     function aService (
         commonFactory,
         commonService,
         bService
     ) {

     };

     return {
         codeIWantToTest: CodeIWantToTest;
     }

     function CodeIWantToTest () {
          console.log('surprise!');
     }
})();

我的茉莉花测试如下：

describe('myService.aService', function () {
    'use strict';
    var aService;
    // I tried adding beforeEach(module('commonModule')); too, but that didn't do anything
    beforeEach(module('myService'));

    beforeEach(function() {
        inject(function(_aService_) {
            console.log('getting aService');
            aService = _aService_;
        });
    }); 

    it('tests my service is defined', function() {
        expect(myService).toBeDefined();
    });
});

此测试失败。未定义 myService ，并且注入函数中的 console.log 不会触发。我的 karma.conf.js 基本上按照它们注入服务的顺序列出依赖项，然后添加服务然后测试。

This test fails. myService isn't defined and the console.log in the inject function doesn't ever fire. My karma.conf.js basically lists the dependencies in the order that they're injected into the service, then adds the service then the test.

什么会导致注入不抢夺服务？我错过了什么？我提到我对 commonService 进行了类似的测试，它运行得很好。所以我很困惑。

What would cause the inject to not grab the service? What am I missing? I mentioned I have a similar test for commonService and it works just fine. So I'm baffled.

推荐答案

我团队的另一个开发人员找到了解决方案，我想将其作为未来人们的答案发布。我感觉这是一个依赖性问题，而且确实如此。当我们正确加载所有JS内容时，组件使用的模板正在加载另一个js依赖项。所以为了解决这个问题，我们有两个不同的解决方案：

Another dev on my team found the solution and I wanted to post it as an answer for the future people. I had a feeling it was a dependency problem, and it was. While we were loading all of the JS stuff correctly, the template that the component uses was loading another js dependency. So to fix this for jasmine, we had two different solutions:

在组件测试文件的顶部，我们可以添加：

at the top of the component test file, we could add:

beforeEach(function () {
    module(function ($provide) {
        $provide.constant('myMissingDependency', {
            // do things to load the dependency here
            });
    });
});

在我们的案例中，它是一个翻译库

In our case it was a translation library

另一种解决方案是将shim文件添加到单元测试目录中，并在测试之前使用karma.config.js加载它。看起来像这样：

The other solution was to add a 'shim' file into the unit test directory and load it with karma.config.js ahead of the tests. That looked like:

(function() {
    angular
        .module('MyService')
        .constant('myMissingDependency', Object.freeze({
            // things to load the dependency
        }));
})();

我无法切换到Chrome，因为我们使用的是Docker而我无法获得测试在本地运行以运行Chrome。因此，我需要添加第二组眼睛。

I wasn't able to switch to Chrome because we're using Docker and I couldn't get the tests to run locally to run Chrome. So adding a second set of eyes to this was what I needed.

这篇关于单元测试角度服务，beforeEach注入不执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！