Problem with exporting default class in Babel/Jest conflict

Currently, I am facing a challenge while testing the code using jest. The issue seems to be related to babel, especially regarding the export of a default class. Here is an example of the code causing the problem...

export default class Test {
  get() {
    return {}
  }
}

The test setup looks like this...

import Test from './test'

describe('test', () => {
  it('should', () => {
    // [...]
  });
});

However, when running the test, I encounter the following error...

node_modules/@babel/runtime-corejs2/helpers/esm/classCallCheck.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export default function _classCallCheck(instance, Constructor) { ^^^^^^

SyntaxError: Unexpected token export

This project is a vue web app with the following configuration...

// babel.config.js
module.exports = {
  presets: ['@vue/app', '@babel/env']
};
// jest.config.js
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**'
  ],
  coverageDirectory: '.coverage',
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.js$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testMatch: [
    '<rootDir>/src/**/*.spec.js'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/']
};

Lastly, here is my test script in the package.json file...

// package.json
[...]
"test": "jest"
[...]

I am struggling to find a solution to this problem, especially since all my .vue files and tests are working correctly. The issue arises only with specific .js files that use the mentioned syntax. Any suggestions on how to resolve this?

Your input would be greatly appreciated.

Answer №1

After some investigation, I made the decision to remove @vue/app as a preset from my configuration. Surprisingly, this change did not affect my Vue testing at all, as everything continued to function as expected with @babel/env. The resulting configuration in my `babel.config.js` file looks like this...

// babel.config.js
module.exports = {
  presets: ['@babel/env']
};

It may seem underwhelming, but this simple adjustment resolved the issue without the need for further exploration into what potential impact @vue/app was having on my setup.

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

Ensure that this specific attribute remains responsive by either setting it within the data option or initializing it for class-based components. Vuex is another viable option to consider for managing state

Terminal Error in vue.runtime.esm.js:4573 [Vue warn]: The property or method "setRegisterEmail" is not defined in the instance but referenced during rendering. Please ensure that this property is reactive, either in the data option, o ...

The Bootstrap modal form fails to properly handle the POST method when sending data to the server

I am encountering an issue with a button that triggers a modal form <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Add Material</a> The modal appears as shown below: https://i.stack.imgur.com/J39x9.pn ...

Creating an npm module using an external JavaScript API script

I am currently in the process of creating an npm package using code from this repository. In my possession is the "minified" js file called http_www.webglearth.com_v2_api.js, which is automatically downloaded by IntelliJ when the <script src=""> tag ...

Sending information to a Flask application using AJAX

Currently, I am working on transferring URLs from an extension to a Flask app. The extension is able to access the current URL of the website. I have set up an AJAX request to connect to Flask, and the connection is successful. However, when trying to send ...

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

Does an invisible property value exist?

Instead of: if ( ! $('#XX').is(':visible) ) Is there a property named invisible? I tested that one out, but it seems to not work. Appreciate the help! ...

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

Ways to show an input box even when there are no results found

I currently have a database with 5 books, but only 3 of them have prices listed. How can I modify my code to display an input box for all books, regardless of whether they have a price in the database? I am new to coding, so I would appreciate it if you co ...

What is the best way to loop through a deeply nested JSON array structure?

I'm grappling with the challenge of iterating through a nested JSON array in my code. Here's what I have so far: <script src="https://unpkg.com/vue"></script> <div id="app"> <div v-for="agreg in mydata.aggregated"> ...

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

What is the best method for selecting only files (excluding folders) in Gulp?

I have a gulpfile where I am injecting files into an appcache manifest in this manner: var cachedFiles = gulp.src('**', {read: false, cwd: 'build'}); gulp.src('src/*.appcache', {base: 'src'}) .pipe($.inject(cachedF ...

Trouble with Setting Up the Email Address for the 'File a Complaint' Form in WordPress

I am currently in the process of integrating a 'Complaint Registration Form' on my WordPress site. This form enables users to input their name, email address, order ID, and reason for filing a complaint. Once submitted, the details are forwarded ...

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

PHP code to export data to a CSV file containing Chinese characters

I attempted the following: $name = iconv("utf-8", "GB18030", $value["name"]); Opening in a text editor and changing the encoding Importing into Excel while adjusting the encoding This process involves PHP and JavaScript: Here is my PHP code: echo & ...

AngularJS Firebase Login Scope Value Not Retained After Refresh

I have stored my unique username in the variable "$scope" and I am trying to access it from different views once the user logs in, using: However, when I refresh the page immediately after the user successfully signs in, the value of "$scope" goes bac ...

The Challenge of Scope in JavaScript

I'm currently facing an issue with executing ajax requests using jQuery. The sequential order in which I am attempting this is as follows: Click the button Make an ajax post request Invoke a function that resides outside the current scope upon compl ...

Tips for modifying VueJS's <slot> content prior to component instantiation

I am working with a VueJS component called comp.vue: <template> <div> <slot></slot> </div> </template> <script> export default { data () { return { } }, } </script> When I ...

Exploring the contrast of utilizing the `new Date()` function compared to Firestore's `new

I am developing a new app and need to calculate the time elapsed between the start and end of a run. When the run starts, I record a timestamp using the new Date() function in Firebase. (I opted for this over firestore fieldValue to avoid conflicts with o ...

Developing a dynamic user interface using an Angular framework and populating it with

I am currently learning Angular (version 1) and facing an issue with my layout. I need to dynamically change the navigation based on the type of user that is logged in. To achieve this, I make an API request when the page loads to fetch the user object dat ...

Unable to locate a React component module that has been published

After successfully publishing a React component to NPM, I encountered an issue when trying to use it in another project - I couldn't find the module! Module not found: Can't resolve 'react-subreddit-posts' in '/Users/kyle.calica/C ...