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

Answer 1

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

Answer 2

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"]
}

Answer 3

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:

> jasmine-examples@1.0.0 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: