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?

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?

• javascript
• angularjs
• jasmine
• ecmascript-6
• grunt-babel

• 1 See karma-webpack and build your test with webpack. This work for me. – Jesús Quintana Commented Oct 1, 2015 at 9:29
• 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. – svp Commented Oct 4, 2015 at 23:12

4 Answers 4

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

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: