Search code examples
typescriptphantomjsaureliasystemjsdexie

Unit Testing PhantomJS Error: Can't find variable: Dexie

The issue I am trying to resolve is represented in the output displayed below:

15 06 2016 11:11:16.532:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
15 06 2016 11:11:16.532:INFO [launcher]: Starting browser PhantomJS
15 06 2016 11:11:18.004:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#3nWVSRqI9N9XmHSCAAAA with id 41039744
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  Error: Can't find variable: Dexie
    Error loading C:/My/My.App/src/My.App.Web/test/case/MyObjectTest.js
[11:11:18] Finished 'test' after 2.8 s

I am attempting to test MyObject. It's dependency structure looks like this:

MyObject
    - MyObjectDependency
        - MyObjectDependency_Dependency
            - Dexie

In other words, MyObject depends on MyObjectDependency which depends on MyObjectDependency_Dependency which finally depends on Dexie.

I am writing an Aurelia web app in TypeScript. I have included the Dexie library (indexedDB wrapper) through jspm. To get the app to build/run I had to explicitly include dexie.js from the jspm_packages folder directly to index.html using script tags.

I tried to get Dexie to be loading using SystemJS (like it should) but, it fails.

I tried updating my karma config to explicitly include dexie.js which didn't resolve the error described in the output above.

I also tried updating versions of the various components being used which also didn't seem to help any.

Here are the versions of the key components I am using:

Node: 4.4.4

JSPM: 0.16.15

SystemJS: 0.19.6

PhantomJS: 2.1.7

Karma: 0.13.22

Dexie: 1.3.6

I have reached a dead end. I am not sure where else to look.

Please let me know if any additional information is needed - I'll gladly add what I can.

Thank you

Solution

  • I have found a solution with the help of Matthew James Davis and alexeibs. Thank you both very much!

    Matthew was right that I was incorrectly importing dexie, and I was able to find exactly where by taking alexeibs suggestion and testing in Chrome rather than PhantomJS.

    It seems the *.d.ts file that comes with the Dexie package is not getting recognized by VS2015 - an issue I am working around for the moment. I added my own *.d.ts file to custom_typings explicitly specifying module 'dexie'.

    I copied the definition file from Dexie and changed the last line from

    export default Dexie;

    to:

    declare module "dexie" {
    export default Dexie;
}

    With this version of dexie.d.ts, VS2015 is now happy with the import statement supported by Dexie documentation:

    import Dexie from 'dexie'.

    During the creation of my Dexie table classes, I added, as suggested by Dexie documentation, the lines:

    const Promise = Dexie.Promise; // KEEP! (or loose transaction safety in await calls!)
const all = Promise.all;

    Everywhere I had this was breaking because I did not import dexie.

    With the type definition created, simply adding the import import Dexie from 'dexie' to these files is what finally resolved the problem.