CODEWITHSUNDEEP
javascriptangularjsjasmineecmascript-6grunt-babel
svp
svp

Reputation: 495

Run javascript es6 code in Jasmine

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?

Upvotes: 7

Views: 6708

Answers (4)

Captain Obvious
Captain Obvious

Reputation: 785

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"

Upvotes: 2

Lin Du
Lin Du

Reputation: 102237

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

Upvotes: 5

Ondřej Želazko
Ondřej Želazko

Reputation: 659

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

Upvotes: 2

Jakub Synowiec
Jakub Synowiec

Reputation: 5959

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

Upvotes: 6

Related Questions