61

I am trying to get a unit test written in Typescript using Jasmine to compile. With the following in my unit-test file, Resharper prompts me with a link to import types from jasmine.d.ts. 

/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />

describe("Person FullName", function () {
    var person;

    BeforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    It("should concatenate first and last names", function () {
        Expect(person.getFullName()).toBe("Joe, Smith");
    });
});

So I click on the link and end up with the following (actually resharper only prefixed the describe function with "Jasmine.", so I manually prefixed the other Jasmine calls):

/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />
import Jasmine = require("../../../Scripts/typings/jasmine/jasmine");

Jasmine.describe("Person FullName", function () {
    var person;

    Jasmine.BeforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    Jasmine.It("should concatenate first and last names", function () {
        Jasmine.Expect(person.getFullName()).toBe("Joe, Smith");
    });
});

However the import statement has a red squiggly line with error message "Unable to resolve external module ../../../scripts/typings/jasmine/jasmine. Module cannot be aliased to a non-module type"

Any idea what is causing this error? I've checked that the "Module System" option is set to AMD in my project build settings. I've also checked that the jasmine module is defined in jasmine.d.ts. I downloaded this file from DefinitelyTyped site.

declare module jasmine {
    ...
}
Improve this question
2
  • 1
    es6: import Jasmine from 'path/here';. es5: var Jasmine = require('path/here');. Use beforeEach, it and expect instead of BeforeEach, It and Expect. Commented Jun 16, 2015 at 10:54
  • Thanks for your response. I thought in Typescript the following is valid? import Jasmine = require("..."). Though perhaps not as it's giving so many compilation errors... Commented Jun 16, 2015 at 13:17

9 Answers 9

Reset to default
77

Here's (in my opinion) the best way to test a ts-node app as of 2018:

npm install --save-dev typescript jasmine @types/jasmine ts-node

In package.json:

{
  "scripts": {
    "test": "ts-node node_modules/jasmine/bin/jasmine"
  }
}

In jasmine.json change file pattern to *.ts

"spec_files": ["**/*[sS]pec.ts"],

In your spec files:

import "jasmine";
import something from "../src/something";

describe("something", () => {
    it("should work", () => {
        expect(something.works()).toBe(true);
    });
});

To run the tests:

npm test

This will use the locally installed versions of ts-node and jasmine. This is better than using globally installed versions, because with local versions, you can be sure that everyone is using the same version.

Note: if you have a web app instead of a node app, you should probably run your tests using Karma instead of the Jasmine CLI.

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

6 Comments

When I try this I get the same problem as when I follow any other tutorial on how to do this: "ReferenceError: define is not defined". I think it's either because I'm using webpack or the fact that it's a vss sdk web extension.
This method is meant for plain ts-node tests (without webpack). If you want webpack, you should probably use karma.
In case you need to provide arguments to jasmine: "test": "ts-node --project ./tsconfig-server.json node_modules/jasmine/bin/jasmine --config=jasmine.json",
For Jasmine newbies, like me, you'll need to change jasmine.json to pick up *.ts files rather than *.js files.
When you use this example and install eslint, none of this code will compile. The Jasmine types won't be available.
|
9

Put this at the top of your typescript spec file:

/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
let Jasmine = require('jasmine');

You must install the following Jasmine modules for that to work:

$ npm install jasmine-core jasmine @types/jasmine @ert78gb/jasmine-ts --save-dev

Once you do that, the IDE (such as WebStorm) will recognize Jasmine and its functions such as describe(), it(), and expect().. So you don't need to prefix them with "Jasmine." Also, you can run your spec files from the command line using the jasmine-ts module. Install these command line tools globally:

$ npm install -g jasmine @ert78gb/jasmine-ts

Then configure the "jasmine" command line module so that Jasmine can find its configuration file. Then you should be able to run jasmine-ts and your spec file should run fine from the command line:

./node_modules/.bin/jasmine-ts src/something.spec.ts

.. and, you can configure your IDE to run it like that as well, and debug runs that way should also work (works for me).

Writing your tests this way, you can run a Jasmine test spec on the server side without Karma, or run it in a web browser using Karma. Same typescript code.

Improve this answer

4 Comments

The problem with jasmine-ts is that it is based on Jasmine 2, so you cannot use the latest and greatest Jasmine 3 features. I hope they get it sorted. There is an open ticket for it on GitHub: github.com/svi3c/jasmine-ts/issues/27
@BennyNeugebauer "they" = us, since it's the open source community. So anyone who needs it can work on improving it, and I encourage you, because yes that would certainly be a helpful improvement!
The original jasmine-ts (npmjs.com/package/jasmine-ts) is not actively maintained, but ert78gb's fork (npmjs.com/package/@ert78gb/jasmine-ts) is. The original jasmine-ts has security vulnerabilities in its dependencies, but ert78gb's fork does not. I recommend installing jasmine-ts like this: npm install -save-dev @ert78gb/jasmine-ts
The original jasmine-ts (npmjs.com/package/jasmine-ts) is now actively maintained, thanks to ert78gb! I now recommend installing jasmine-ts the original way: npm install -save-dev jasmine-ts I currently cannot edit this post to revert my changes, because "Suggested edit queue is full"... :(
5

If you have issues with imports, use tsconfig-paths

npm i ts-node tsconfig-paths types/jasmine jasmine --save-dev

Run typescript-enabled jasmine:

ts-node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine.js

Ensure that your jasmine will search .ts files:

"spec_files": [
    "**/*[sS]pec.ts"
],
"helpers": [
    "helpers/**/*.ts"
],

To test your scripts you may also need polyfills if you use them in your project. Create a helper file with required imports, like helpers/global/polifill.ts

import 'core-js';
Improve this answer

Comments

4

For me I did the following:

Install Typings

npm install typings --global

Then add the typings in for jasmine

typings install dt~jasmine --save --global
Improve this answer

1 Comment

You really shouldn't be using typings anymore. Much better to use the type definitions in the @types/* repos in NPM.
4

You could try a side-effect only import which brings in the @types/jasmine declaration and places the jasmine functions into the global scope so you don't need to prefix each call with jasmine. allowing a quick port from existing unit tests and still plays nice with webpack.

// tslint:disable-next-line:no-import-side-effect
import "jasmine";

describe("My Unit Test", () => { /* ... */ } );

Of course you still need to install jasmine and the typings:

$ npm i jasmine @types/jasmine --save-dev

But no need for specialized jasmine loaders for ts or node. Just run jasmine against the compiled js files:

$ node ./node_modules/jasmine/bin/jasmine.js --config=test/support/jasmine.json

Assuming your typescript files are within a "test" subdirectory compiling to bin/test and you have a test/support/jasmine.json with something like this:

{
    "spec_dir": "bin/test",
    "spec_files": [
      "**/*[sS]pec.js"
    ],
    "stopSpecOnExpectationFailure": false,
    "random": false
}

P.S. all of the above works on Windows too

Improve this answer

Comments

3

Include this to your jasmine html file,...

<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>

...or install the npm jasmine package:

npm install --save-dev jasmine

when you are using the second way (jasmine as module) you have to import it:

var jasmine = require('jasmine');

or

import jasmine from 'jasmine';

then change the other code:

jasmine.describe("Person FullName", function () {
    var person;

    jasmine.beforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    jasmine.it("should concatenate first and last names", function () {
        jasmine.expect(person.getFullName()).toBe("Joe, Smith");
    });
});

Personally i would prefer the first way without using the jasmine npm module. (I didn't test the module yet)

Improve this answer

1 Comment

I'm getting "Property 'describe' does not exist on type 'typeof jasmine'." Any ideas as to what is going wrong?
3

The highest voted answer is 90% of the way there, but it's missing a critical detail that might affect you: it assumes your tsconfig.json "module" set to "CommonJS". If you have something else, like "module": "ES2020" or "module": "ESNext", you'll be playing whack-a-mole with import and require errors for half the day.

You don't need to change your entire project's "module" value to get past these errors, you can set a node-ts override instead. That way, the project will only be "module": "CommonJS" while node-ts runs. There are multiple ways to do this, but I do it by adding this to the bottom of my tsconfig.json file:

...
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Anyway, there are so many hard-learned gotcha's around setting up jasmine and typescript that I think it's worth sharing an entire working project. You can browse/clone it on github and I'll share an excerpt below:

Project Structure

.
├── .eslintrc.json
├── .prettierrc
├── LICENSE
├── package.json
├── spec/
│   └── support/
│       ├── jasmine.json
│       ├── logger.js
│       ├── slow-spec-reporter.js
│       └── type-check.js
├── src/
│   ├── index.spec.ts
│   └── index.ts
├── tsconfig.json
├── tsconfig.src.json
├── tsconfig.test.json
└── tsup.config.ts

./package.json

{
  "name": "jasmine-ts-example",
  "description": "A working example of a TypeScript project using the Jasmine test framework.",
  "version": "0.0.1",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "files": [
    "dist"
  ],
  "scripts": {
    "compile-typescript": "tsup",
    "build": "tsup",
    "test": "jasmine",
    "run": "npm run build && node dist/index.js"
  },
  "keywords": ["jasmine", "ts", "typescript", "node-ts"],
  "devDependencies": {
    "@types/jasmine": "^5.1.4",
    "@types/node": "^20.10.6",
    "@typescript-eslint/eslint-plugin": "^6.17.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.2",
    "eslint-plugin-testcafe": "^0.2.1",
    "jasmine": "^5.1.0",
    "ts-node": "^10.9.2",
    "tslib": "^2.6.2",
    "tsup": "^8.0.1",
    "typescript": "^5.3.3"
  },
  "engines": {
    "node": ">=18"
  }
}

./spec/support/jasmine.json

{
  "spec_dir": "",
  "spec_files": ["**/*.spec.ts"],
  "helpers": [
    "spec/support/logger.js",
    "spec/support/type-check.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

./spec/support/logger.js

jasmine.getEnv().addReporter({
  specDone: function (result) {
    if (result.status !== 'excluded') {
      console.log(result.fullName);
    }
  },
});

./spec/support/slow-spec-reporter.js

// To enable, add as a helper in your jasmine config file
const slowSpecsReporter = {
    specStarted: function(result) {
      this.specStartTime = Date.now()
    },
    specDone: function(result) {
      const seconds = (Date.now() - this.specStartTime) / 1000
      if (seconds > 0.5) {
        console.log('WARNING - This spec took ' + seconds + ' seconds: "' + result.fullName + '"')
      }
    },
  }
jasmine.getEnv().addReporter(slowSpecsReporter);

./spec/support/type-check.js

require('ts-node').register({
  project: "tsconfig.json",
  transpileOnly: true,
  files: true
})

./tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "lib": [
      "ESNext"
    ] /* Specify library files to be included in the compilation. */,
    "types": ["node", "jasmine"],
    "allowJs": false /* Allow javascript files to be compiled. */,
    "declaration": true /* Generates corresponding '.d.ts' file. */,
    "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
    "sourceMap": true /* Generates corresponding '.map' file. */,
    "outDir": "dist" /* Redirect output structure to the directory. */,
    "importHelpers": true /* Import emit helpers from 'tslib'. */,
    "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
    "strict": true /* Enable all strict type-checking options. */,
    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
    /* Module Resolution Options */
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
  "references": [
    {
      "path": "./tsconfig.src.json"
    }
  ],
  "include": [],
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

./tsconfig.src.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "composite": true
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["./**/*.spec.ts"]
}

./tsconfig.test.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "composite": true
  },
  "references": [
    {
      "path": "./tsconfig.src.json"
    }
  ],
  "include": ["./**/*.spec.ts", "./test/**/*.ts", "./tsup.config.ts"]
}

./src/index.spec.ts

import { myBool } from './index';

describe(`index`, () => {
  it(`passes`, () => {
    expect(myBool).toEqual(true);
  });
});

./src/index.ts

export const myBool = false;
Improve this answer

Comments

0

You didn't ask for this, but for bonus points: once you get AJ's answer up and running (using ts-node to invoke the Jasmine startup script), you can add a new task:

"scripts": {
  "watch": "ts-node-dev --respawn -- ./node_modules/jasmine/bin/jasmine src/**.spec.ts"
}

Of course, you can pass your specs or any other arguments using Jasmine's config file instead, if you like. Now, Jasmine will run all your specs once, then ts-node-dev will sit in the background waiting for your tests or anything they might have require'd to change, at which point jasmine will be run again. I haven't worked out a way to only run the tests that have changed (or tests whose imports have changed) yet -- as far as I can tell, that's not supported anyway;

Improve this answer

Comments

0

My folder structure

Spec folder is on the root of project

    spec
      \- dist              // compiled tests
      \- helpers           // files modified testing env
         \- ts-console.ts  // pretty prints of results
      \- support
         \- jasmine.json
      \- YourTestHere.spec.ts
      \- tsconfig.json     // tsconfig for your tests

Files content

ts-console.ts

const TSConsoleReporter = require("jasmine-console-reporter");
jasmine.getEnv().clearReporters();
jasmine.getEnv().addReporter(new TSConsoleReporter());

jasmine.json

{
  "spec_dir": "spec/dist",
  "spec_files": [
     "**/*[sS]pec.js"
  ],
  "helpers": [
    "spec/helpers/**/*.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

With extra script in package.json

"scripts": {
  "test": "rm -rf ./spec/dist && tsc -p ./spec && jasmine"
}

and add line "/spec/dist" to .gitignore

Run your tests!

Run your tests with npm test.

How does it work?

  1. Directory for tests is cleaned.
  2. Tests are compiled to spec/dist folder to JS.
  3. Tests are runned from this location.

I hope it will help you. Good coding.

Improve this answer

3 Comments

As of 2022, jasmine-console-reporter has not been updated in about 6 years. It won't work if your nodejs project is using the newer import syntax (ES6+ modules).
Thanks, do you have any alternative?
I ended up using ts-node to run the TypeScript files directly as described in the other answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.