Testing TypeScript modules with package dependencies

Question

I have a class written in TypeScript:

import * as uuid from "uuid";

export class IdGenerator {

  getId() {
    return uuid.v4();  
  }
}

This has a dependency on the uuid package that I have installed with npm.

I deploy this with other code written in TypeScript to the browser using webpack. Dependencies are resolved, all is well.

I want to test the class, so I write the following test:

import { IdGenerator } from "../src/IdGenerator";

describe("An id generator", () => {

  const idGenerator = new IdGenerator();

  it("generates an id", () => {
    expect(idGenerator.getId()).not.toBeNull();
  });

});

I use Chutzpah with the following configuration:

{
  "Framework": "jasmine",
  "TestHarnessReferenceMode": "AMD",
  "TestHarnessLocationMode": "SettingsFileAdjacent",
  "EnableTestFileBatching": true,
  "References": [
    {
      "Path": "node_modules/requirejs/require.js",
      "IsTestFrameworkFile": true
    }
  ],
  "Compile": {
    "Mode": "External",
    "Extensions": [ ".ts" ],
    "ExtensionsWithNoOutput": [ ".d.ts" ]
  },
  "Tests": [
    { "Path": "Components/test" }
  ]
}

When trying to test with Chutzpah, I get the following error:

Unhandled exception [...] in [...] /node_modules/requirejs/require.js [...] Script error for "uuid", needed by: Components/src/IdGenerator

So I add a reference to the path in chutzpah.json, which gets rid of this error but raises an error for one of uuid's dependencies. I add a reference for the dependency, then get a further dependency error, and so on.

Ideally I would like all dependencies to be resolved in the same way as they are with the bundle deployed to the browser.

Should I abandon the idea of trying to test my TypeScript files with package dependencies in this way and instead look into using dependency injection and mock the package dependencies in the tested TypeScript files? Perhaps also create separate JavaScript tests for the bundle? Or is there another approach that will allow the testing of my TypeScript code with the package dependencies?

Can you provide a sample that I can run locally? I am curious to see the difference in webpack vs chutzpah to see if I can help. — Matthew Manela, Jun 25 '17 at 14:07
Project here: https://github.com/alataffective/testing-typescript thanks. — fractor, Jun 26 '17 at 14:26

score 0 · Answer 1 · answered Jun 26 '17 at 14:47

This looks like it won't work since requireJS and Node are not compatible in this way. See here. From that answer:

It is not possible to use RequireJS on the client (browser) to access files from node_modules. Files under node_modules must first be copied to a location that is accessible (under the public folder) before the client can access them. The documentation says RequireJS can access Node modules, but this only works for server-side JavaScript (when you want to use RequireJS-style module syntax in Node).

To use your config module in the client app, you must first transform it into a RequireJS-compatible module and copy it under public. This article explains how to automate this with package managers and build tools, and contains the quote that finally fixed my broken understanding of RequireJS + Node:

In order to use node modules on the browser you will need a build tool. This might bother you. If this is a deal breaker then by all means continue wasting your life copying and pasting code and arranging your script tags.

Testing TypeScript modules with package dependencies

1 Answers1