DEV Community

Cover image for Using Jest With AngularJS
Eyal Lapid
Eyal Lapid

Posted on • Edited on

Using Jest With AngularJS

#angular #jest #wip

This is a summary of the exeperiences I had intergrating Jest into an AngularJs project.

This is a living document - work in progress.

angular.mock.module is not a function

This took sometime to investigate. There are some info on the web regarding this:

  • Mismatch of angular and angular-mock versions.
  • Order of loading angular and angular-mocks regarding the test framework.

In my case it was something more sinister. AngularJs itself skip and does not load the nessasery logic for angular.mock.module to work.

In angular-mocks.js file, Angular load the mock.module logic only if it detects Jamsine or Mocha test framework presents.

(function(jasmineOrMocha) {

  if (!jasmineOrMocha) {
    return;
  }

...

})(window.jasmine || window.mocha);
Enter fullscreen mode Exit fullscreen mode

They describe it in a oneliner of the api site also:

NOTE: This function is declared ONLY WHEN running tests with jasmine or mocha

Solution

Before loading angular-mocks, set the global jasmine or mocha to truthy value.

setup-jest.js

global.mocha = true;
...
Enter fullscreen mode Exit fullscreen mode

jest-config.js

...
setupFiles: [
  './src/setup-jest.js',
],
...
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
olhaapril profile image
Olha •

Thanks a lot, really helpful article!

Collapse
 
alessandro308 profile image
Alessandro Pagiaro •

I think this only happens from jest 27 that removes jasmine.