Run javascript es6 code in Jasmine

Question

I am exploring JavaScript es6 code in angularjs app and used grunt babel to compile the es6 to es5.

My unit test (jasmine) doesn't run with es6 code using phantomjs.

Whats best way to run test? Is there any plugin to use for jasmine to run es6 code?

Roccoroch

See karma-webpack and build your test with webpack. This work for me. – Lightfooted

Thanks.That seems good,is it possible to do without using karma? Currently i am working on transpile(es6 to es5) code for unit testing. – Roccoroch

Answer 1

You can configure Jasmine to use Babel as a helper and transform your code on the fly.

Install babel-register module:

npm install --save-dev babel-register

And register it as a Jasmine helper

In your spec/support/jasmine.json file make the following changes:

{
  "helpers": [
    "../node_modules/babel-register/lib/node.js"
  ]
}

For more information see the piecioshka/test-jasmine-babel repository on Github.

Babel 6.x does not ship with any transformations enabled by default. You need to explicitly tell it what transformations to run. You are already using Babel so those modules should be installed. If not, you can install the ES2015 Preset using npm:

npm install babel-preset-es2015 --save-dev

Assuming you have installed Babel and the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:

{
  "presets": ["es2015"]
}

Grimbal

what is the solution for babel 7? This doesn't work – Karttikeya

For me karma was the only working solution. – Panayiotis

Answer 2

Here is a minimal setup example for Babel 7+, Jasmine 3.5.0, project structure:

☁  jasmine-examples [master] ⚡  tree -a -L 3 -I "node_modules|coverage|.git|.nyc_output"
.
├── .babelrc
├── .editorconfig
├── .gitignore
├── .nycrc
├── .prettierrc
├── LICENSE
├── README.md
├── jasmine.json
├── package-lock.json
├── package.json
└── src
    ├── helpers
    │   ├── console-reporter.js
    │   └── jsdom.js
    └── stackoverflow
        ├── 60138152
        ├── 61121812
        ├── 61277026
        ├── 61643544
        └── 61985831

8 directories, 12 files

devDependencies:

"@babel/preset-env": "^7.9.6",
"@babel/register": "^7.9.0",
"jasmine": "^3.5.0",

npm scripts:

"scripts": {
  "test": "jasmine --config=./jasmine.json",
  "coverage": "nyc npm run test && nyc report --reporter=html"
}

jasmine.json:

{
  "spec_dir": "src",
  "spec_files": ["**/?(*.)+(spec|test).[jt]s?(x)"],
  "helpers": ["helpers/**/*.js", "../node_modules/@babel/register/lib/node.js"],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

.babelrc:

{
  "presets": ["@babel/preset-env"]
}

Here we need to watch out that the file paths of helpers:

Array of filepaths (and globs) relative to spec_dir to include before jasmine specs

The file paths in the helpers option are relative to spec_dir, NOT relative project root path. Which means you should use

"../node_modules/@babel/register/lib/node.js"

NOT

"./node_modules/@babel/register/lib/node.js"

src/61985831/myClass.js:

export class MyClass {
  constructor() {}
}

src/61985831/myClass.spec.js:

import { MyClass } from './myClass';

describe('my class', function () {
  var myClassInstance;
  beforeEach(function () {
    myClassInstance = new MyClass();
  });

  it('is an instance of MyClass', function () {
    expect(myClassInstance).toBeInstanceOf(MyClass);
  });
});

The outcome for the test:

> [email protected] test /Users/ldu020/workspace/github.com/mrdulin/jasmine-examples
> jasmine --config=./jasmine.json "/Users/ldu020/workspace/github.com/mrdulin/jasmine-examples/src/stackoverflow/61985831/myClass.spec.js"


Executing 1 defined specs...
Running in random order... (seed: 66758)

Test Suites & Specs:
(node:57105) ExperimentalWarning: The fs.promises API is experimental

1. my class
   ✔ is an instance of MyClass (4ms)

>> Done!


Summary:

👊  Passed
Suites:  1 of 1
Specs:   1 of 1
Expects: 1 (0 failures)
Finished in 0.017 seconds

repo here: https://github.com/mrdulin/jasmine-examples

Shingles

Very nice work, many jasmine examples. However, for me it did not work. I updated every module in package.json, removed the jasmine-pretty-html-reporter (because it is depended on a very old jasmine version). After npm run test I got: import { MyClass } from './myClass'; ^^^^^^ SyntaxError: Cannot use import statement outside a module Which is where I stuck in my project setup. – Panayiotis

Answer 3

I spent quite some time to make babel & jasmine to cooperate, so i should post my solution here:

install babel-cli package, do standard babel config (for me it was .babelrc file)

i created custom runner file: bin/jasmine

#!/usr/bin/env bash
./node_modules/.bin/babel-node ./node_modules/.bin/jasmine $@ --config=spec/support/jasmine.json

that way even passing arguments works! bin/jasmine -h while path to config conveniently always defined

Overarch

Answer 4

I managed to get it working for babel 7+ by executing the following command in package.json:

"test": "jasmine --config=jasmine.json --require=@babel/register"

Karttikeya