Issue with source file detection in RequireJS and Karma

Having trouble testing my Angular scripts with Karma and RequireJS, as I keep encountering this error:

Error in Firefox 28.0.0 (Mac OS X 10.9): 'There is no timestamp for /base/app/public/js/test/unit/controllersSpec.js!'

Warning [web-server]: 404: /base/app/public/js/test/unit/controllersSpec.js

Error in Firefox 28.0.0 (Mac OS X 10.9): Error: Script error for: test/unit/controllersSpec http://requirejs.org/docs/errors.html#scripterror at /Users/Masanori/Desktop/FlippySurvey/node_modules/requirejs/require.js:166

Despite trying to alter the baseUrl settings in various ways, the error persists. Anyone able to assist me in resolving this issue? Your help would be greatly appreciated!

My current directory structure looks like this:

app/
   public/
       vendors/
            ....
       js/
          controllers.js
          controllers/
                   mainctrl.js
test
   unit
        controllersSpec.js
   karma.conf.js
   test-main.js

Below are excerpts from my test-main.js and karma.conf.js files:

test-main.js'

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

require.config({
  paths:{
    'angular'     : '/base/app/public/vendors/angular/angular',
    'angularMocks': '/base/app/public/vendors/angular-mock/angular-mock',
    'domReady'    : '/base/app/public/vendors/requirejs-domready/domready',
    'angularRoute': '/base/app/public/vendors/angular-route/angular-route'
  },

  baseUrl: '/base/app/public/js',

  shim: {
    'angular' :{'exports':'angular'},
    'angularRoute' :['angular'],
    'angularMocks':{
      deps: ['angular'],
      'exports':'angular.mock'
    }
  },

  deps: allTestFiles,

  callback: window.__karma__.start
});

karma.conf.js

module.exports = function(config) {
     config.set({

    basePath: '',

    frameworks: ['jasmine', 'requirejs'],

    files: [
      {pattern: 'unit/*.js', included: false},
      {pattern: 'unit/**/*.js', included: false},
      {pattern: '../app/public/js/**/*.js', included: false},
      {pattern: '../app/public/js/*.js', included: false},
      {pattern: '../app/public/vendors/**/*.js', included: false},
      'test-main.js'
    ],

    exclude: [

    ],

    preprocessors: {

    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Firefox'],

    singleRun: false
  });
};

Answer №1

Alright.

I recently had to make some adjustments to my code, particularly the part that Karma automatically adds when initializing with requirejs.


Changes made in test-main.js

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function(file) {
   if (TEST_REGEXP.test(file)) {
   // Converting paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
   }
});

PathToModule removed

Object.keys(window.__karma__.files).forEach(function(file) {
   if (TEST_REGEXP.test(file)) {
      allTestFiles.push(file);
    }
});

Now Karma is able to detect all the test files!

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

Error: Angular encountered an unexpected token in the syntax

I am encountering an issue while trying to incorporate a user's profile updater on my website. Whenever I attempt to access a user's profile on the site, I run into this Angular error: main.ts:6 ERROR SyntaxError: Unexpected token 'e', ...

Utilize HTML5 localStorage functionality

I have a good understanding of utilizing HTML5 localStorage with methods like localStorage.getItem/setItem. However, I am currently trying to figure out the implementation for a dynamic page. Let me explain the scenario: On my dynamic page (myPage.jsp), ...

Unable to utilize ES6 syntax for injecting a service

I am encountering some issues while trying to implement a service into a controller using ES6 syntax. CategoriesService.js export default class CategoriesService { constructor() { this.getCategories = function ($q) { var deferred ...

Error: Unable to access the 'PERSISTENT' property of an undefined value

I am facing an issue while trying to play a video on Ionic. Upon launching my app, I encountered the following error in my console which points to this specific line of code: window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){ T ...

Issues with Angular ng-model-options not working properly in Internet Explorer

Is there a way to submit a form on keypress/enter while using ng-model-options="{updateOn: 'submit'}" Here is the template: <form ng-model-options="{ updateOn: 'submit' }"> <input type="submit" value="submit" style="visib ...

Implementing change event to activate select dropdown with jQuery

Is there a way to modify the code so that select2 and select3 are disabled by default, but become enabled only when an option is selected in the previous select dropdown (excluding the placeholder "Select your option")? In addition, I want the first place ...

Why is Vue JS throwing an error stating "undefined is not an object"?

After creating a Vue app on a single page .html file served by django, which consists of multiple components, I decided to transition this project into a full-fledged Vue.js project using the Vue CLI. Initially, I thought it would be a simple task to trans ...

The AWS Lambda function utilizing Puppeteer is encountering an issue when trying to switch to a new

My Puppeteer project running in AWS Lambda stopped working since yesterday. I made a small code change, but it keeps getting stuck at the browser's newPage method, even after reverting my changes. I am utilizing the lambda starter kit project from: h ...

Storing Json data in a variable within Angular 2: a step-by-step guide

https://i.sstatic.net/2QjkJ.png Within the params.value object, there are 3 arrays containing names that I need to extract and store in a variable. I attempted to use a ForEach loop for this purpose, but encountered an issue. Can you spot what's wron ...

How come my FormData POST request isn't being blocked by CORS policy?

I am facing confusion with one query: why does my POST request, which sends form data from a frontend hosted on a different origin to a backend hosted on a different origin, not get blocked by CORS policy? My Node.js code includes the following: const exp ...

Grunt Pokes at XML to Set a Variable Destination Name

When using grunt-xmlpoke to update an XML file, the path of the XML file is provided as a parameter. The issue arises when the first WebConfigPath (key) in the files section is interpreted as a string. This results in updating a local copy of the XML fil ...

How can custom JavaScript objects have tags set upon click?

When it comes to JavaScript object referring, things can get a bit confusing. Imagine having a tag like this: <button id='myButton'>Hello</button> Now, let's say you create a custom class in JavaScript: function myClass(){ ...

Steps to dynamically modify an HTML element within an Android WebView

https://www.bing.com/search?q=кму here I want to switch the bing icon to google I attempted : if (url == "https://www.bing.com/search?q=") { view.evaluateJavascript( ("\n"+ "wind ...

Error: Attempting to access the 'SearchBox' property of an undefined variable is not allowed

I have been working on a Google Maps code that displays both public and private schools with different markers for each category. However, when running the code, I encountered an error specifically on this line of code: var searchBox = new google.maps.pl ...

Focus automatically on an input component when the value in the Vuex store is updated in Vue

Here's the code snippet from my component: //template <v-select ref='ItemSearchSelect' :options="options"></v-select> ... //script created: function () { this.$store.subscribe((setFocusSearch, state) => { ...

Issue with Material UI tool tip not closing upon clicking on an element is persistent

Check out this link for a material UI tooltip demo I have been experimenting with the material UI tooltip in the provided link. The tooltip pops up when hovering over the button, but it doesn't disappear when clicking on the button. Is this the defau ...

Error: Module 'electron-prebuilt' not found

I am encountering an issue with my Electron app that utilizes Nightmare.js after compiling it into an .exe file using electron-packager. Everything functions properly until I click a button that triggers Nightmare.js, at which point I receive the followi ...

Unable to set selected property in React Material-UI menu item

One issue I'm facing is setting the selected prop using react mui menu item. In a multiple select menu list, there's a field called allValues that, when clicked, should toggle the selection of all menu items. The code for this functionality looks ...

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

Is it possible to integrate a JavaScript library into the Vue prototype?

I've recently integrated ProgressBar.js library into my app, which is built using vue and laravel with laravel mix. After installing ProgressBar.js via npm install, I am unsure how to incorporate it into my .vue files. I'm considering adding it t ...