Experimenting with ES6 modules using Mocha

Recently, I was given a new project at work that involves using raw native imports/exports in code (compatible only with the latest browsers). The project is being worked on by consultants, and although I cannot make significant changes to their work, I am tasked with running tests frequently in node.js for speed and efficiency. I prefer to use jsdom when necessary to run my tests and avoid constantly switching between tabs to view results.

Due to decisions made by the consultants without our input, I am required to use mocha and chai for testing instead of my preferred Jasmine and Jest. Additionally, there is no established testing workflow set up by the consultants, leaving me to figure it out on my own.

In my quest for solutions, I came across an old question on Stack Overflow discussing unexpected token import errors with babel and mocha. While some suggestions I found were outdated or not applicable to newer versions of babel.

After much trial and error, I finally managed to install @babel/core, @babel/register, and @/babel/preset-env to proceed with setting up the testing environment.

Following this setup, I ran into issues while executing:

mocha --require @babel/register path/to/test.js

Despite having the right preset in .babelrc, the process threw an error stating "regeneratorRuntime is not defined," as it attempted to polyfill async/await unnecessarily since node already supports it.

My main requirement is simple - only convert import/export statements to module.exports and require, without the need for additional transforms or polyfills which might affect performance. Although I reluctantly added @babel/polyfill to workaround the issue, I am curious if there's a way to target only import/export transformations?

Answer №1

To specify the `targets` in your `@babel/preset-env` configuration, you can indicate which environment to aim for.

For targeting the current Node.js version, use the following setup:


presets: [
  [
    '@babel/preset-env',
    {
      targets: {
        node: 'current',
      },
    },
  ],
  ...
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for minimizing the transfer time of large arrays using ajax

https://i.stack.imgur.com/IP0oe.pngDescription I am currently working on transferring a JSON object from the server to the client using PHP and JavaScript via AJAX. The JSON object contains a large array (200x200) of integers. The server is running on lo ...

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

At the moment, my rendered model (which is grey in color) stretches across the entire width of the html page with the mesh centered within that width. I want to reduce this width but when I do so, the click event on the model seems to be misaligned. Three. ...

Angular Component - Array missing initial value in @Input property

Having trouble transferring values between components? I'm currently dealing with a situation involving two components: report-form and comment-form. The report form contains an array of comments, displaying a list of comments and a button for each on ...

Are there other options besides Chrome Frame for enhancing Raphael performance on Internet Explorer?

Currently, I am using Raphael 2.1 to simultaneously draw 15 lines, each consisting of 50 two-pixel paths. The performance is optimal in Safari and Chrome, acceptable in Firefox, subpar in Opera, and struggles in IE9. Despite Microsoft's claim that SVG ...

Difficulty in accurately retrieving the value in a PHP echo statement using jQuery

$id = "123"; When on the page book.php, $id is passed to an external jquery-book.php file. <script type="text/javascript"> var id = '<?php echo $id; ?>'; </script> <script type="text/javascript" src="jquery-book.php"& ...

Dynamic Interactive Content with AJAX

Imagine if all the forms in your application followed this structure: <div id="result_messages"></div> <form action="/action"> <!-- all the form --> </form> Here's an example of what a submit button for this form might ...

Is there a way to load jQuery after the page has loaded? Any suggestions on how

Exploring jQuery $(document).ready(function(){ $('.categories').live('change', function() { var my_location = window.location.pathname.replace('admin/', ''); $(this).parents("tr").next("tr.subcat ...

How can I reposition an image diagonally to a specific location using JavaScript in p5.js? Is there a method to display an image and then conceal it at a chosen location in p5.js?

Is there a way to move the third image diagonally until it intersects with the two images? var pic1; var pic2; var pic3; let posX=0 let posY=0 const rightwall=350; function preload(){ pic1=loadImage("5.png") pic2=loadImage("iron.jpg&qu ...

Error encountered in ES6 destructuring syntax

Could you please assist me in figuring out what is causing the issue here: var foo = { bar: 1, baz: 2 }; var { bar, baz } = foo; I encountered an error SyntaxError: Unexpected token {. I am using node v5.4.1 and I am unsure if the problem lies wit ...

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin

I have a Service that retrieves a token using Observable and an HttpInterceptor to inject the token into every http request. It works seamlessly with a single request, but when using forkJoin, no response is received. Here is the code for the interceptor: ...

Issue 404: Trouble sending form data from React to Express

I'm facing an issue when trying to send form data from a React frontend to my Node.js/Express backend. The problem seems to be related to a 404 error. I've included only the relevant code snippets below for reference. Function for submitting the ...

Efficient method invocation for objects within an array using functional programming techniques

Is there a way to execute a method that doesn't require arguments and doesn't return anything on each object within an array of objects that are all the same type? I've been trying to find a solution without resorting to using a traditional ...

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

It seems that instead of triggering a POST request, somehow a GET request is being triggered. Additionally, the ajax call is not being made as expected. I have attempted this many times before, but none of my attempts seem to be working. It could potenti ...

Replacing text within nested elements

I am facing an issue with replacing certain elements on my webpage. The element in question looks like this: <div id="product-123"> <h3>${Title}</h3> <div> ${Description} </div> <div> ${P ...

Error occurs when a handlebar helper is nested too deeply

I have set up two handlebar helpers with the names 'outer' and 'inner'. In my template, I am using them as shown below: {{#outer (inner data)}} {{/outer}} However, I am encountering an error in the console related to the inner helper, ...

Navigating through a JavaScript object array within another object

I am looking to iterate through a JavaScript object array Here is my object response: { "kind": "calendar#events", "etag": "\"p3288namrojte20g\"", "summary": "pedicura", "updated": "2019-05-01T14:25:51.642Z", "timeZone": "America/Argentina ...

How does the AngularJS Dependency Injection system determine the names of the arguments it needs to inject?

Here is an example directly from the official website: function PhoneListCtrl ($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; } The $s ...

Tips for submitting multiple radio button values in a tabular format

HTML Code: <div class="tab"><h4>Zip Code</h4> <p><input type="text" class="text1" placeholder="Enter zip code..." oninput="this.className = ''" name="zipcode"></p> </div> <div class="tab">& ...

Steps for deactivating AMD on four files and sequentially loading them using webpack

I am facing an issue where I need to disable AMD on 4 files and ensure that video.js is loaded before the other 3 files, as they are dependent on it. My attempt to achieve this in webpack.config.js was unsuccessful: const path = require('path') ...

What steps can I take to trigger a 404 error instead of a cast error?

My route is defined as /mysafe/idofthemodel. When the idofthemodel is not found, it throws a cast error Cast to ObjectId failed for value "something" (type string) at path "_id" for model "modelname". Instead of this error, I ...