title: How to test Mocha & Chai + TypeScript + SystemJS + JSPM + Angular + Three.js
body: <p>I'm working on a web-based 3D game. I have my project completely set up with <strong>TypeScript</strong>.</p>
  
  <p>I have all my routing set up using <strong>Angular</strong>, and alongside I'm using <strong>Three.js</strong> as my 3D engine.</p>
  
  <p>Finally, I have the <strong>Mocha + Chai</strong> combo to test my TypeScript using a particular plugin called <a href="https://github.com/theblacksmith/typescript-require" rel="nofollow">typescript-require</a>.</p>
  
  <p>I use <strong>Systemjs</strong> as an importer for my <strong>JSPM</strong> packages.</p>
  
  <p>So to set the stage:<br>
  (<em>Files are stripped down for example purposes</em>)</p>
  
  <p>Systemjs/JSPM File: <code>jspmconfig.js</code></p>
  
  <pre><code>System.config({
  
    ...
  
    paths: {
  
      ...
  
      "github:*": "jspm_packages/github/*"
  
      ...
  
    },
  
    map: {
  
      ...
  
      "three.js": "github:mrdoob/three.js@master"
  
      ...
  
    }
  });
  </code></pre>
  
  <p>Node File: <code>package.json</code></p>
  
  <pre><code>...
  
  "scripts": {
    "test": "mocha --compilers ts:typescript-require ./source/**/*.spec.ts"
  },
  
  ...
  </code></pre>
  
  <p>Controller File: <code>QuestDetailCtrl.ts</code>:</p>
  
  <pre><code>/// &lt;reference path="../../../../../typings/tsd.d.ts" /&gt;
  
  // Controller | Dashboard
  export default class QuestDetailCtrl {
  
      ... 
  
      // Constructor
      constructor() { ... }
  
      renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer(); // &lt;-- This line uses a THREE instance.
  }
  </code></pre>
  
  <p><strong>NOTE</strong> <em>Somewhere a bit earlier in my app I already import <strong>Three.js</strong>, so it is available in my controller (this also compiles properly to ES5 and works in the browser).</em></p>
  
  <p>Mocha Test File <code>QuestDetailCtrl.spec.ts</code></p>
  
  <pre><code>/// &lt;reference path="../../../../../typings/tsd.d.ts" /&gt;
  
  // Imports
  import { assert, expect } from 'chai';
  import QuestDetailCtrl from './QuestDetailCtrl';
  
  // Describe
  describe('QuestDetailCtrl', function() {
  
      // Shoulds
      it('should exist', () =&gt; {
          expect(QuestDetailCtrl).to.exist; // &lt;-- WORKS
      });
  
      it('should initialize', () =&gt; {
          let instance = new QuestDetailCtrl(); // &lt;-- DOES NOT WORK
      });
  
  });
  </code></pre>
  
  <p>In the last file <code>QuestDetailCtrl.spec.ts</code>, I initialize a new instance of my controller (TypeScript class). </p>
  
  <p>Because Mocha does not know about Three.js, this test fails on initializing the instance of my controller.</p>
  
  <p>So my question becomes:</p>
  
  <p><strong>How would I mock/import Three.js (or any other third party lib) inside my tests, such that Mocha knows about it and is able to test/initialize it?</strong></p>
  
  <p>I guess similar situations are applicable to Angular when I start testing this, so a solution would be very much appreciated!</p>
  
  <p>I already bumped into solutions where one would <code>import System from 'systemjs'</code> and set <code>meta</code> data to the <code>three.js</code> library to set <code>global</code> vars for System, but I couldn't get that to work.</p>
  
  <p>Thanks!</p>