How To Test Code Setup With Babel Configuration(for Library) Using Jasmine?

Good day to all, I am struggling from quite a few days and raised few questions here here and I have narrowed them down to this question. I have below babel configuration: { 'p

Solution 1:

After many days of struggle with multiple issue's raised, all drill down to this answer. (Will try to add all my r&d here)

Firstly, I am using below babel configuration as I am authoring library. Used Suggested configuration from Here

{"presets":[["@babel/env",{"modules":false,}]],"plugins":[["@babel/plugin-transform-runtime",//target environment are not supported{"corejs":3,"helpers":true,"regenerator":true}]]}

At the same time I wanted to test my modules using Jasmine + webpack. But the problem is inside Jasmine they have set custom definition of setTimeout as well as multiple Matcher's utility for testing Maps and the configuration of babel that I am using has included polyfills that will not pollute global environment. Because of this I was not able to use multiple feature's of jasmine like Clock, Maps Equality using equals Matchers. Actually babel was preventing Jasmine implementation making test script to fail. Detail Read Here

I reached out to Babel team with this problem, thinking if babel has some configuration that will resolve my problem to unit-test module's on local at the same time it does not affect my production bundle.

They suggested that this cannot be achieved with @babel/plugin-transform-runtime with corejs option.

Steps to do:

• Remove the corejs: 3 option from @babel/plugin-transform-runtime
• Install the new babel-plugin-polyfill-corejs3, which is like transform-runtime's + corejs option but more powerful. Documentation
• Configure your babel like below:

["polyfill-corejs3", {
  method: "usage-pure",
  exclude: ["web.timers"]
}]

Notice: The "exclude" configuration which says:

All polyfill providers accept two options: include and exclude. They are an array of strings to polyfills to be considered as not supported by the targets (include) or to be considered as supported (exclude).

This configuration has made my day and it is simply saying that do not polyfill fill for setTimeout and Map Constructor, allowing Jasmine to set the global definition and make all of the test case to run successfully. Hence Resolved my previously asked question herehere and this one's too 😄.

I set the exclude to:

"exclude":["web.timers",//<--For setTimeout"es.map"//For new Map()]

Lastly, One thing I want is to set all of this configuration only for test scripts and this too can be achieved with babel Env configuration BABEL_ENV that will be read by babel config file's. Just like they are using in there master branch. Read Here and here

Final babel configuration would be like:

{
  "presets": [
    ["@babel/env", { "modules": false }]
  ],
  "plugins": [
    "@babel/transform-runtime",
    ["polyfill-corejs3", { "method": "usage-pure" }]
  ],
  "env": {
    "test": {
      "plugins": [
         ["polyfill-corejs3", {
           "method": "usage-pure",
           "exclude": ["web.timers"]
          }]
       ]
  }
}

Test Script in package.json would be:

"test":"BABEL_ENV=test npm run karma",

Hope this helps to anyone facing similar issue.