When running the `vue-cli-service test:unit` command, an error involving an "Unexpected token" message related to the usage of the spread operator

Within my code, I am utilizing the destructuring operator. However, during the module build phase, I encountered an "Unexpected token" error. Any suggestions on how to resolve this issue without completely rewriting my code to avoid using the destructuring operator?

To run tests, I execute 

vue-cli-service test:unit src/**/*.spec.js
.

Here is a snippet from my package.json:

    ...
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.12.1",
        "@vue/cli-service": "^4.5.9",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-cli": "^6.26.0",
        ...
    },
    ...

https://i.sstatic.net/n7yxL.png

javascriptvue.jsunit-testingtestingvue-cli

Answer №1

To solve this issue, I had to incorporate @babel/preset-env by configuring it in either babel.config.js (in my case) or .babelrc

presets: [
    [
        '@babel/preset-env',
        {
            targets: {
                esmodules: true,
            },
        }
    ]
],

The solution was found in a comment on GitHub, which can be seen here

Furthermore, you can learn more about targets.esmodules in depth

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

Transforming JSON dates to Javascript dates using AngularJS and ASP.NET

How can I convert a JSON date /Date(1454351400000)/ into a proper date format using AngularJS and ASP.NET? $http.get('/home/GetProducts') .success(function (result) { $scope.products = result; }) .error(function (data) { ...

javascriptasp.netangularjsjson

Leveraging the flexibility of an undefined variable as a useEffect dependency

Summary: Need help using listRef.current.clientWidth as a dependency in useEffect. I'm working on creating a dynamic list that automatically adjusts the width of its items based on the list's width. I've almost got it working, but I'm ...

javascriptnode.jsreactjsnpm

Error encountered with AJAX call when attempting to utilize string method

I am looking to add HTML content to a TinyMCE editor in an ASP.NET MVC project. After some thought, I have found a solution that involves converting the HTML file to a string on the server side and then calling it using Ajax on the client side. Here is a ...

javascriptc#jqueryajaxasp.net-mvc

Navigating the elements within R Shiny: A comprehensive guide

Can anyone help me figure out how to access specific elements in my Shiny app using their HTML tags? In this particular example, I need to retrieve all h1 elements along with their respective labels and IDs. library(shiny) ui <- fluidPage( h1("Get" ...

javascripthtmlrshiny

The React SwiperJs autoplay feature seems to be malfunctioning, as the swiper is not automatically

I have been utilizing the Swiper component in React from this link. However, I encountered an issue with setting it to autoplay as it doesn't auto swipe. Here is my attempted code: // Resource: https://swiperjs.com/get-started/ import React from &apos ...

javascriptreactjsnext.jsswiper.js

Tips for displaying HTML content using an array in Vue JS

Hi, I'm a beginner with Vue JS and I'm working on passing an HTML table using this array. I have a dropdown where I can select the option I want, but I'm struggling to figure out how to include HTML within it. Whenever I try, it ends up disp ...

javascripthtmlarraysvue.jsdropdown

JavaScript code can be used to access data from a JSON file and present the flower and color information in separate unordered lists

How can I retrieve data from a JSON file in JavaScript and display flowers and colors in separate unordered lists? I am having trouble adding it. fetch('dataFiles/midterm.json', { method: 'GET', mode: 'no-cors' ...

javascriptapifetch-api

Implement a jQuery click event on a dynamically generated button in the code-behind

A button (Replybtn) is dynamically created when clicked in the code-behind file. --Default.aspx.cs-- protected void ReloadThePanelDetails_Click(object sender, EventArgs e) { litResultDetails.Text = litResultDetails.Text + "<button id='Replyb ...

javascriptc#jqueryasp.net

Searching in sequelize for a specific date using a clause

Operating System: Linux (Lubuntu) Programming Language: Javascript (Node js) Framework: express js Database: mysql "data" represents a Date field from the "activitat" table Upon running this query using Sequelize.js models.TblActivitat.findAll( ...

javascriptmysqlexpress

The onClick event handler is triggered on page load instead of waiting for a click

Recently delving into React, I encountered an issue while attempting to call a function set as a prop. Take a look at my component below: class SamplesInnerLrg extends Component { playSampleAction(sample,sampleId) { console.log(sample); } ...

javascriptreactjsecmascript-6

Divide a string into separate numbers using JavaScript

This snippet of code is designed to search the table #operations for all instances of <td> elements with the dynamic class ".fuel "+ACID: let k = 0; let ac_fuel = 0; parsed.data.forEach(arrayWithinData => { let ACID = parsed.data[k][0]; ...

javascriptjquerystringsplitsum

Preserving the active menu item in Nuxt and Vue with Element UI when the browser back button is clicked

Hey there, I'm facing an issue with a clicked menu item that shows a 'selected' state by darkening the item for user feedback. The problem arises when the active item gets reset upon pressing the browser back button, even though the route ch ...

vue.jsvue-routernuxt.jselement-ui

Engaging Floor Layout

Currently, I am in the process of developing an interactive floorplan for an office project. The main objective is to provide a user-friendly interface where individuals can search for a specific employee and have their respective office location highlight ...

javascriptjqueryhtmlsvg

Angular displaying a slice of the data array

After following the example mentioned here, and successfully receiving API data, I am facing an issue where only one field from the data array is displayed in the TypeScript component's HTML element. Below is the content of todo.component.ts file im ...

javascripthtmlangulartypescriptasp.net-web-api

Navigating Angular on Internet ExplorerUnderstanding Angular's Compatibility

Having some trouble with an Angular app I'm developing. It displays perfectly on Chrome, but not at all on IE. Any tips on how to configure IE to show it correctly, or should I make changes to the app to ensure compatibility with IE? You can see how i ...

javascriptangulargoogle-chromeinternet-explorer

What is the process of using the split() method to extract specific text from a string in JavaScript?

Working with AngularJS and facing a requirement to extract a specific text from a scope value. Here's my scope value: $scope.myLogMsg = '1111 order is placed by Sukumar Ms(User)'; //output: by Sukumar Ms(User) Desired output: by Sukumar Ms ...

javascriptangularjs

A step-by-step guide to creating a delete feature for nested data in Laravel using Vue.js

My standard function format for deleting is not working on nested data. methods: { delete() { axios.delete('./../api/parent/' + this.parent.id) .then( response => { if( re ...

laravelvue.js

Can someone please show me the process of iterating through an array in vuejs?

I am trying to create a Vue.js method that loops through an array of objects and returns all the names in that array. However, I am not sure how to achieve this. The method implementation would look something like this: fruits =[ {name: "apple", calori ...

vue.jsforeach

What could be the reason for the sudden lack of content from the Blogger API?

For weeks, I've been using the Google API to retrieve JSON data from my Blogger account and showcase and style blog posts on my personal website. Everything was functioning flawlessly until yesterday when, out of the blue, the content section stopped ...

javascriptjsongoogle-apiblogger

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

javascriptphphtml