Angular test "Office is not defined"

Question

I am trying to add continuous integration for Excel add-in written in Angular 6. I am using Karma and Jasmine. When I run tests, every one of them passes but then I get the following error:

Chrome 68.0.3440 (Windows 10 0.0.0) ERROR
{
"message": "An error was thrown in afterAll\nUncaught ReferenceError: Office is not defined",
"str": "An error was thrown in afterAll\nUncaught ReferenceError: Office is not defined"
}

This is my package.json:

{
  "name": "top-secret",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl true --port 3000",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.2",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.2",
    "@angular/material-moment-adapter": "^6.4.2",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.7",
    "intl": "^1.2.5",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "ng2-daterangepicker": "^2.0.12",
    "npm": "^6.3.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.0.0-rc.0",
    "saturn-datepicker": "^6.0.5",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.7.2",
    "@angular/cli": "^6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.3.5",
    "@types/node": "^10.5.5",
    "@types/office-js": "0.0.101",
    "codelyzer": "^4.4.2",
    "jasmine-core": "^3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "phantomjs-prebuilt": "^2.1.16",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^2.9.2"
  }
}

And karma.conf.js:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },

    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'PhantomJS'],
    singleRun: false
  });
};

Answer 1

How do you load the Office.js? ("Far as I remember they load through a script element")

Anyhow, the actual code would be beneficial, but what I can think of straight and blind is when you run the tests, those run async, and the Office.js is not yet loaded at the time! Make sure that the Office.JS is loaded before the tests.

Answer 2

Ok, so thanks to TwistedTamarin's answer I found out that if you load a script by CDN, you need to add it do karma.conf.js

files: [
  'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js'
],

Link to response.