Question

有人可以提供一个使用Jest测试AngularJS 1.x应用程序（工厂，控制器）的通用示例吗？该示例应使用简单的ES5编写（无ES6 import语法）。

Answer 1

高级别：

安装Angular-Mocks和Jest-CLI
创建测试文件
Mock Angular并注入服务/工厂

require('../node_modules/angular/angular.min.js');
require('../node_modules/angular-mocks/angular-mocks.js');
require('./mathservice.js');

describe('Math service - addTwoNumbers', function(){

  beforeEach(
    angular.mock.module('mathmodule')
  );

  var _mathservice;

  beforeEach(inject((mathservice) => {
    _mathservice = mathservice;
  }));

  it('1 + 1 should equal 2', function(){
    var actual = _mathservice.addTwoNumbers(1,1);
    expect(actual).toEqual(2);
  });

});

我已经将一篇文章放在一起，逐步展示了如何设置更多细节：

https://curtistimson.co.uk/post/angularjs/angularjs-jest-unit-testing/

Answer 2

将其添加到package.json：

  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --runInBand"
  },
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "app"]
  }

使用npm安装角度，角度模拟和笑话。

编写测试并使用npm test命令运行它。

请参阅此处示例https://github.com/rantiev/template-jest-with-angular

Answer 3

在我的答案中，您可以看到如何测试AngularJS打字稿控制器（ES5）

// foo-controller.test.js
// --------------------------------    
require("angular/angular.min");
require("angular-mocks");
angular.module("app.fooModule", []);
require("../Controllers/FooController.ts"); 

describe("test controller FooController", () => {
  var controller, payload = {};
  var controllerScope = {
    "FooModule.Services": {},
    "$rootScope": {}
  }

  angular.mock.module.sharedInjector();
  beforeAll(() => {
    var controllerPayload;
    angular.mock.module("app.fooModule");
    angular.mock.inject((_$controller_) => {
      controllerPayload = _$controller_;
    });

    controller = controllerPayload("FooModule.FooController", controllerScope);
    controller.setMinDate(payload);
  });

  it("FooController minDate should be equal to current year", () => {
    expect(controller.minDate.getFullYear()).toEqual((new Date().getFullYear()));
  });
});

// foo-controller.ts
// --------------------------------    
module FooModule
{
  "use strict";

  export class FooController {
    public minDate: any;

    static $inject = [ "FooModule.Services", "$rootScope" ];
    constructor(public services: FooModule.Services, public $rootScope: ng.IRootScopeService) {}

    setMinDate() {
      this.minDate = new Date();
    }
  }

  angular.module("app.fooModule ").controller("FooModule.FooController ", FooController);
}

// package.json
// --------------------------------    
{
    "package-json-regular-fields": "",
    "scripts": {
      "test": "jest --forceExit --watchAll"
    },
    "jest": {
      "roots": ["<rootDir>/."],
      "moduleFileExtensions": ["ts", "js"],
      "transform": {
        "^.+\\.(ts|tsx)?$": "ts-jest"
      },
      "testMatch": ["**/__tests__/**/*.test.+(ts|js)"]
    },
    "dependencies": {
      "angular": "^1.6.6"
    },
    "devDependencies": {
      "@types/angular": "^1.6.56",
      "@types/jest": "^24.0.23",
      "angular-mocks": "^1.6.6",
      "jest": "^24.9.0",
      "jest-cli": "^21.2.1",
      "ts-jest": "^24.1.0",
      "typescript": "^3.7.2"
    }
}

有关更多信息，请访问https://docs.angularjs.org/guide/unit-testing
享受吧！

如何使用Jest测试AngularJS 1.x应用程序？

3 个答案: