Angular not loading when running Karma tests (following a tutorial)

Question

I am trying to learn about how to take a Test Driven Development approach when writing Angular apps; I have been following an Introduction to Angular Test Driven Development tutorial.

I am failing at the first hurdle, before I've written any tests.

When I run karma start from the tutorial/ directory I get the error:

Karma v 6.3.2 - connected; test: karma_error An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at http://localhost:9876/base/app/app.js

How do I get Angular to load?

My current understanding is that angular should load automatically because of the files: [] line in karma.conf.js and app.js should have access to it. At the moment my app.js is creating a basic controller and nothing else and as far I can tell my code matches the code in the tutorial for this stage. The tutorial has a Git Hub repository.

Based on the tutorial, my directory structure is as follows:

tutorial/
|-app/
|---app.js
|-karma.conf.js
|-node_modules/ [Only listing relevant files]
|---angular/
|------angular.js
|---angular-mocks/
|------angular-mocks.js
|-package.json
|-tests/
|--[empty dir]

This is my entire app/app.js:

angular.module('ItemsApp', [])
    .controller('MainCtrl', function($scope) {
        $scope.title = 'Items App Title'
    });

And this is my karma.conf.js:

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'app/**.js',
      'tests/**.js',
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Mehmet Karatay · Accepted Answer · 2021-04-12 09:07:52Z

1

The tutorial suggests you give paths of your application in the wrong order when running karma init.

As app/app.js depends on node_modules/angular/angular.js, the latter should be declared first. To fix the problem, update karma.conf.js to declare:

    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'app/**.js',
      'tests/**.js'
    ],

This is the order shown in the tutorial's sample file, but not the order that (on my system) was generated when I followed the instructions in the tutorial for running karma init.

answered Apr 12, 2021 at 9:07

Mehmet Karatay

2974 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular not loading when running Karma tests (following a tutorial)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related