Unit testing Angular Directives with Jest

Question

I feel I am missing something crucial in this extremely simplified angular directive unit test:

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

co         


        

Answer 1

I ran into the same baffling behavior a couple years later and I wanted to share what I found

If you transpile the test using babel and look at the imports you will find something similar to the following

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var angular = _interopRequireWildcard(require("angular"));
require("angular-mocks");

_interopRequireWildcard currently has the following implementation

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj;
  } else {
    var newObj = {};

    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};

          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc);
          } else {
            newObj[key] = obj[key];
          }
        }
      }
    }

    newObj.default = obj;
    return newObj;
  }
}

In short it creates a new object and copies all the properties from the imported object. This is why angular === window.angular is false. It also explains why angular.mock isn't defined, it didn't exist when _interopRequireWildcard made a copy of the module

Given that there are a couple additional ways to solve the problem in addition to the accepted answer

Instead of using import * as angular from 'angular' using import angular from 'angular' should avoid the behavior because _interopRequireDefault does not return a different object. (However, if you are using TypeScript it may not resolve the types for 'angular' correctly with this method)

Another option would be to import angular twice:

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