What is the mechanism by which AngularJS manages all of my module dependencies with jest?

Updated: Since this is an older project, I didn't use any module loader. Instead, I imported all dependencies in my index.html using the script tag.


The structure of my AngularJS looks like this:

  • app.js
angular.module('app', ['LocalStorageModule', 'ngCookies', ...])
  • testController
angular.module('app').controller('testController', function(){})

Now, when I try to test the testController, here's how my jest unit testing code looks like:

  • testController.spec.js
require('./testController.controller')

describe('TestController', () => {
  beforeEach(angular.mock.module('app'));
})

However, I encountered an error:

Module 'app' is not available

This indicates that I need to import app.js, but doing so also results in another error:

Failed to instantiate module LocalStorageModule due to: Module 'LocalStorageModule' is not available!

So, do I have to import all twenty or more dependencies installed by bower in every test file? This doesn't seem like a good approach. How can I better handle and import all my components installed via bower?

Answer №1

The issue appears to stem from the dependency injection in angular.js. This is likely due to having dependencies declared in your app module. To resolve this, you will need to create a mock of your app module and then inject the necessary dependencies.

describe('TestController', () => {
  beforeEach(
      angular.mock.module('app')
  );

  let _localStorageModule;
  let _ngCookies;


  beforeEach(
      inject((LocalStorageModule, ngCookies) => {
          _localStorageModule = LocalStorageModule;
          _ngCookies = ngCookies;
      })
  );
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set restriction on the total number of records permitted in a mongodb database

My MongoDB collection is filled with documents, and I want to impose a storage limit of 100 documents. Once this limit is reached, new documents should not be able to be stored. I came across capped collections, but they are not suitable due to the restric ...

Comparing strings in JavaScript arrays

I have developed a JavaScript function that compares two strings and calculates the number of similar characters using a specific logic: String 1 = “aaabc” | String 2 = “aakbc” ===> The function returns 2 String 1 = “88835” | String 2 = “ ...

template for displaying data in Vue.js using props

In my application, I have a component that I frequently use to display tables. Now, I want to enhance this component by allowing the customization of table fields (templates) through props in the parent component. This way, I can avoid constant edits to th ...

An issue with three.js involving sprites, the material of sprites, and detecting mouse clicks

Hello there, I appreciate you taking the time to read this. I've been diving into various tutorials on how to click objects using the mouse in three.js. However, none of them mentioned whether it's possible with sprites. To try and work around th ...

Using AngularJS, you can easily merge one array of data into another array

In my coding environment, I am working with two arrays. The first array is called `$scope.workingSchedules` and it contains data related to working hours for different days of the week. $scope.workingSchedules=[ { ...

Discovering the width of desktop and mobile browsers to ensure maximum compatibility

While working on media queries, I encountered this code: //Checking various widths as different browsers report them differently if ($(window).width()!==0) { width = $(window).width(); } else if (window.innerWidth!==0) { width = window.inner ...

"Is there a way to retrieve "Lorem ipsum" information from a web service in JSON format

Does anyone know of any sample web services that serve JSON data? I'm looking to practice consuming JSON for testing and learning purposes. I would even be interested in downloading JSON files with images and other content to study offline. Perhaps th ...

Utilizing ngblur and ngfocus to toggle visibility of dropdown options in Angular

Whenever I click off the list without selecting anything, the ngblur event isn't triggered when using select and option. I'm searching for a directive that can help me determine when the options in the select are shown or hidden. Any suggestions ...

The login functionality on Passport.js is not syncing with Angular updates

I'm currently in the process of developing my first full-stack MEAN application, but I've encountered some issues due to following an outdated tutorial with newer npm packages. The particular problem arises when handling the login functionality w ...

Load various file formats into a Three.js scene

I am working on a project where I need to create a function that can load a 3D object into ThreeJS. The user will upload the file onto our website, and it could be in various formats such as STL, JSON, Babylon, Collada, etc. Currently, my code only suppor ...

Telerik Nested perspective

Here is the code snippet that I am currently working on, which involves a nested grid from Telerik: I've encountered an issue with using JavaScript to locate and interact with controls named "PreviousDate" and "DateofBirth". <%@ Page Language="c# ...

Form submissions are not saving checkbox answers

As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...

The identifier "resolve" in the catch block has not been defined

Why is it not possible to call resolve in the catch block? I wanted to catch a failed request and attempt it again in the catch block, but I am encountering an issue where resolve is not defined. I am confused since I am inside of the promise, so why is i ...

Send data from the URL to PHP and then to Javascript in order to showcase the value within an input field

I need to pre-fill an email subscriber form with an email address from the URL. The specific email address is included in the following URL: http://www.domain.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcacbdbbb9e3b9b ...

What is the best way to select the destination folder for output in Webpack?

Whenever I run webpack using "webpack --mode development", it generates a dist folder and places the bundle.js file inside it. My aim is to have it created and placed in the same directory instead. How can I achieve this? module.exports = { entry: " ...

Custom pagination with onSelectionModelChange in React Material UI Data Grid

Has anyone encountered a problem with using the DataGrid component's onSelectionModelChange prop? I can successfully retrieve the selected rows for a single page, but when I implement custom pagination and navigate to the next page, the previous selec ...

Issue with executing .then() after Promise.all() in Node.js

Utilizing the nodejs Mongo driver, I am aiming to create backups for small collections and insert data into another collection. The strategy I have devised involves: Defining a function that can back up a collection (by making a collection with the suff ...

Data object constructor is not triggered during JSON parsing

Currently, I am retrieving data from a server and then parsing it into TypeScript classes. To incorporate inheritance in my classes, each class must be capable of reporting its type. Let me explain the process: Starting with the base class import { PageE ...

The custom validation in Node.js using Express-Validator is ineffective

I have implemented custom validators using express-validator to include specific validations: middlewares.js module.exports = function (app) { console.log('making sure I am being called'); return function (request, response, next) { ...

JavaScript: A guide to substituting specific characters in a string

I attempted to extract a list of names from a URL as URL parameters. var url_arrays = [],url_param; var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < url.length; i++) ...