How to configure setup for running ES6 tests with Mocha 6 and Babel 7?

Question

How to configure setup for running ES6 tests with Mocha 6 and Babel 7?

Looking to compile a library written in ES6/7 to ES5 and store it in a dist/ folder. Additionally, I need to run tests for this library.

The development dependencies listed in my package.json file are as follows:

"devDependencies": {
  "@babel/cli": "^7.4.4",
  "@babel/core": "^7.4.5",
  "@babel/preset-env": "^7.4.5",
  "@babel/register": "^7.4.4",
  "chai": "^4.2.0",
  "mocha": "^6.1.4",
  "sinon": "^7.3.2"
},

My build and test scripts in the package.json file are configured like this:

"scripts": {
  "test": "mocha --require @babel/register",
  "build": "babel src -d dist --presets=@babel/preset-env"
},

Executing npm run build successfully compiles the files into the dist/ folder.

However, when trying to run npm run test, I encounter an issue which is the main problem at hand.

> mocha --require @babel/register

/Users/dro/Repos/lib/node_modules/yargs/yargs.js:1163
      else throw err
           ^

ReferenceError: regeneratorRuntime is not defined

Initially, there was an import error that was resolved by adding a .babelrc file.

The content of my .babelrc file is shown below.

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

While researching about the regeneratorRuntime issue, I came across an article on babel-polyfill (https://babeljs.io/docs/en/babel-polyfill) stating that the polyfill may not be necessary.

This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool.

What steps are required to configure everything correctly?

Note that webpack is not being utilized in this setup.

npm mocha.js babeljs transpiler

Answer 1

Answer №1

If you are interested in testing in ES6 using Mocha and Babel 7, check out this helpful resource: https://dev.to/bnorbertjs/my-nodejs-setup-mocha--chai-babel7-es6-43ei or

To start, run the following commands:
npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

In your .babelrc file, make sure to add the following configuration:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Answer 2

If you are interested in testing in ES6 using Mocha and Babel 7, check out this helpful resource: https://dev.to/bnorbertjs/my-nodejs-setup-mocha--chai-babel7-es6-43ei or

To start, run the following commands:
npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

In your .babelrc file, make sure to add the following configuration:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Answer 3

Answer №2

Take a look at the official documentation:

npm install --save-dev babel-register

To set up, modify your package.json file as follows:

{
  "scripts": {
    "test": "mocha --require babel-register"
  }
}

For some features, you may need to include a polyfill:

npm install --save-dev babel-polyfill

{
  "scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }
}

Answer 4

Take a look at the official documentation:

npm install --save-dev babel-register

To set up, modify your package.json file as follows:

{
  "scripts": {
    "test": "mocha --require babel-register"
  }
}

For some features, you may need to include a polyfill:

npm install --save-dev babel-polyfill

{
  "scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }
}

Answer 5

Answer №3

Here are the necessary steps for implementing Babel transformations and core-js polyfills in your tests file:

💡 The transformations are only applied based on the current environment, ensuring that only necessary transpilations/polyfills are done. Target environments can be specified via a .browserslist file or as a property in the package.json file. (learn more here)

Step 1: Installing required packages:

@babel/core (find out why)
@babel/preset-env (discover why)
@babel/register (explore why)
core-js (understand why)

Note that @babel/polyfill is available and utilizes core-js internally. However, it has been deprecated in favor of directly using core-js.

Step 2: Setting up a Babel configuration file named `babel.config.js`

(previously known as .babelrc.js or a .json file). Create this file at the root level of your codebase.

A basic configuration (for testing purposes without bundling) might look like this:

module.exports = {
  presets: [
    ['@babel/preset-env', { 
      "corejs": "3.26",   
      "useBuiltIns": "usage"
    }],
};

corejs - This library provides polyfills and should be specified with the minor version to avoid using version x.0. It becomes necessary when testing code on older Node versions that do not support all JavaScript methods. The relevance depends on your use of such methods (e.g., String.prototype.replaceAll).

useBuiltIns - must be enabled for applying the corejs polyfills. Refer to the official documentation to learn more about it.

By default, @babel/preset-env transpiles code for the current environment, but you can specify a different environment by configuring the "targets" option.

You may include additional presets like @babel/preset-react, if your code is written in React, along with any other plugins required for your code.

Step 3: Integrating `mocha` with the Babel configuration:

In your `package.json` file

In the scripts section, add a command like the following:

"test": "mocha \"src/**/*.test.js\""

Create a `.mocharc.json` file with the following content:

{
  "exit": true,
  "color": true,
  "require": ["@babel/register"],
  "ignore": "node_modules"
}

This setup will apply Babel transformations to all test files.

If there's a need to apply specific global JavaScript settings across all tests, another file can be added to the require setting, such as fixtures.cjs:

"require": ["@babel/register", &quo;charset=8599t;fixtures.cjs"],

fixtures.cjs:

The example below demonstrates how to incorporate a chai plugin (commonly used with Mocha) for testing DOM-related code:

var chai = require('chai'),
  chaiDOM = require('chai-dom');

exports.mochaGlobalSetup = function () {
    chai.use(chaiDOM);
}

Step 1: Installing required packages:

@babel/core (find out why)
@babel/preset-env (discover why)
@babel/register (explore why)
core-js (understand why)

Note that @babel/polyfill is available and utilizes core-js internally. However, it has been deprecated in favor of directly using core-js.

Step 2: Setting up a Babel configuration file named `babel.config.js`

(previously known as .babelrc.js or a .json file). Create this file at the root level of your codebase.

A basic configuration (for testing purposes without bundling) might look like this:

module.exports = {
  presets: [
    ['@babel/preset-env', { 
      "corejs": "3.26",   
      "useBuiltIns": "usage"
    }],
};

corejs - This library provides polyfills and should be specified with the minor version to avoid using version x.0. It becomes necessary when testing code on older Node versions that do not support all JavaScript methods. The relevance depends on your use of such methods (e.g., String.prototype.replaceAll).

useBuiltIns - must be enabled for applying the corejs polyfills. Refer to the official documentation to learn more about it.

By default, @babel/preset-env transpiles code for the current environment, but you can specify a different environment by configuring the "targets" option.

You may include additional presets like @babel/preset-react, if your code is written in React, along with any other plugins required for your code.

Step 3: Integrating `mocha` with the Babel configuration:

In your `package.json` file

In the scripts section, add a command like the following:

"test": "mocha \"src/**/*.test.js\""

Create a `.mocharc.json` file with the following content:

{
  "exit": true,
  "color": true,
  "require": ["@babel/register"],
  "ignore": "node_modules"
}

This setup will apply Babel transformations to all test files.

If there's a need to apply specific global JavaScript settings across all tests, another file can be added to the require setting, such as fixtures.cjs:

"require": ["@babel/register", &quo;charset=8599t;fixtures.cjs"],

fixtures.cjs:

The example below demonstrates how to incorporate a chai plugin (commonly used with Mocha) for testing DOM-related code:

var chai = require('chai'),
  chaiDOM = require('chai-dom');

exports.mochaGlobalSetup = function () {
    chai.use(chaiDOM);
}

How to configure setup for running ES6 tests with Mocha 6 and Babel 7?

Answer №1

Answer №2

Answer №3

Step 1: Installing required packages:

Step 2: Setting up a Babel configuration file named `babel.config.js`

Step 3: Integrating `mocha` with the Babel configuration:

In your `package.json` file

Create a `.mocharc.json` file with the following content:

Further reading:

Similar questions

Challenges with utilizing Node.js on zsh

Execute the npm start command

What could be causing the error I'm encountering while unit testing with Jasmine/Karma?

Having trouble verifying a phone number using the awesome-phonenumber npm package?

Is there a way to redirect the results of the 'find' command into a pipeline that will trigger the execution of 'more' followed by 'grep' on the package.json file located two directories above?

Revamping an npm package on GitHub

"Encountered npm error: JSON input ended unexpectedly" while trying to install express-mysql-session"

The problem of "net::ERR_ABORTED" in the console is causing FontAwesome icons to fail to load

Mysterious package found its way into my node_modules directory

Issue: 0909006C - The PEM routines are unable to retrieve the name as there is no start line

The installation process for npm or yarn commands is dragging on for an extended period of time on my Ubuntu system

I'm facing an issue where I am unable to install packages using npm due to an ERESOLVE

what is the significance of the term "On Your Network" within React?

Whenever I execute the command npm run watch, the dist folder located at the root of the project gets deleted

Running 'npm run dev' on SiteGround server can be done by accessing the command line interface and navigating to the

Execute a command post-deployment on AWS Beanstalk

"There was an issue loading the gRPC binary module as it was not properly installed for this particular system" exclusive to Windows users

A step-by-step guide on running a git pull command before initiating npm start in Node

What are the drawbacks of relying on a dependent dependency in software development?

Best practices for placing the package.json within a tgz dependency package

How to configure setup for running ES6 tests with Mocha 6 and Babel 7?

Answer №1

Answer №2

Answer №3

Step 1: Installing required packages:

Step 2: Setting up a Babel configuration file named babel.config.js

Step 3: Integrating mocha with the Babel configuration:

In your package.json file

Create a .mocharc.json file with the following content:

Further reading:

Similar questions

Challenges with utilizing Node.js on zsh

Execute the npm start command

What could be causing the error I'm encountering while unit testing with Jasmine/Karma?

Having trouble verifying a phone number using the awesome-phonenumber npm package?

Is there a way to redirect the results of the 'find' command into a pipeline that will trigger the execution of 'more' followed by 'grep' on the package.json file located two directories above?

Revamping an npm package on GitHub

"Encountered npm error: JSON input ended unexpectedly" while trying to install express-mysql-session"

The problem of "net::ERR_ABORTED" in the console is causing FontAwesome icons to fail to load

Mysterious package found its way into my node_modules directory

Issue: 0909006C - The PEM routines are unable to retrieve the name as there is no start line

The installation process for npm or yarn commands is dragging on for an extended period of time on my Ubuntu system

I'm facing an issue where I am unable to install packages using npm due to an ERESOLVE

what is the significance of the term "On Your Network" within React?

Whenever I execute the command npm run watch, the dist folder located at the root of the project gets deleted

Running 'npm run dev' on SiteGround server can be done by accessing the command line interface and navigating to the

Execute a command post-deployment on AWS Beanstalk

"There was an issue loading the gRPC binary module as it was not properly installed for this particular system" exclusive to Windows users

A step-by-step guide on running a git pull command before initiating npm start in Node

What are the drawbacks of relying on a dependent dependency in software development?

Best practices for placing the package.json within a tgz dependency package

Step 2: Setting up a Babel configuration file named `babel.config.js`

Step 3: Integrating `mocha` with the Babel configuration:

In your `package.json` file

Create a `.mocharc.json` file with the following content: