angularjs – 使用Jest对Angular Directives进行单元测试

import * as angular from 'angular'
import 'angular-mocks'

const app = angular.module('my-app',[])

app.directive('myDirective',() => ({
    template: 'this does not work either',link: (scope,element) => { // have also tried compile fn
        console.log('This does not log')
        element.html('Hi!')
    }
}))

describe('myDirective',() => {
    var element,scope

    beforeEach(app)

    beforeEach(inject(($rootScope,$compilE) => {
        scope = $rootScope.$new()
        element = $compile('<my-directive />')(scopE)
        scope.$digest()
    }))

    it('should actually do something',() => {
        expect(element.html()).toEqual('Hi!')
    })
})

FAIL  test/HtmlToPlaintextDirective.spec.js
  ● myDirective › should actually do something

    expect(received).toEqual(expected)

    Expected value to equal:
      "Hi!"
    Received:
      ""

更新的答案：

在单个文件中导入所有内容时,正确的事情无法按预期工作.

挖掘事物看起来你正在遇到Babel / jest支持依赖于全局变量的浏览器脚本(如AngularJS)的一些魔力.

发生的事情是模块的角度变量与角度模拟可见的全局角度变量不同.

您可以通过在其中一个测试的顶部运行此操作来检查：

import * as angular from 'angular'
import 'angular-mocks'

console.log(angular === window.angular); // `false` in jest!

console.log(angular.mock); // undefined
console.log(window.angular.mock); // `{...}` defined

要解决此问题,您只需在测试中使用全局角度变量.

SRC / __ __测试/所有功能于one.test.js：

import "angular";
import "angular-mocks";

/*
Work around jest's window/global mock magic.

Use the global version of `angular` that has been augmented by angular-mocks.
*/
var angular = window.angular;


export var app = angular.module('app',[]);

app.directive('myDirective',() => ({
    link: (scope,element) => {
        console.log('This does log');
        scope.content = 'Hi!';
    },template: 'content: {{Content}}'
}));


describe('myDirective',function(){
    var element;
    var scope;

    beforeEach(function(){
        angular.mock.module(app.Name);
    });

    it('should do something',function(){
        inject(function(
            $rootScope,$compile
        ){
            scope = $rootScope.$new();
            element = $compile('<my-directive></my-directive>')(scopE);
            scope.$digest();
        });

        expect(element.html()).toEqual('content: Hi!');
    });
});

原始答案:(这很有效,因为我在测试中偶然使用了角度的全局版本.)

测试中的Angular模块未在测试中正确初始化.

您对beforeEach(app)的调用不正确.

相反,您需要使用angular.mock.module(“modulename”)来初始化您的模块.

describe('myDirective',scope

    // You need to pass the module name to `angular.mock.module()`
    beforeEach(function(){
        angular.mock.module(app.Name);
    });


    // Then you can set up and run your tests as normal:
    beforeEach(inject(($rootScope,$compilE) => {
        scope = $rootScope.$new()
        element = $compile('<my-directive></my-directive>')(scopE)
        scope.$digest()
    }))

    it('should actually do something',() => {
        expect(element.html()).toEqual('Hi!')
    })
});

然后你的测试按我的预期工作：

PASS  src\__test__\app.test.js
  myDirective
    √ should do something (46ms)

作为参考,这是完整的应用程序和测试：

SRC /应用/ app.module.js：

import * as angular from 'angular'

export var app = angular.module('app',template: 'content: {{Content}}'
}))

SRC / __测试__ / app.test.js：

import {app} from "../app/app.module";
import "angular-mocks";

describe('myDirective',function(){
    var element;
    var scope;

    beforeEach(function(){
        angular.mock.module(app.Name);
    });

    beforeEach(inject(function(
        $rootScope,$compile
    ){
        scope = $rootScope.$new();
        element = $compile('<my-directive></my-directive>')(scopE);
        scope.$digest();
    }));

    it('should do something',function(){
        expect(element.html()).toEqual('content: Hi!');
    });
});