The issue I'm facing in Jest is the "SyntaxError: Unexpected token 'export'" even after configuring transformIgnorePatterns

When executing npm run test, which triggers the execution of jest, a test suite fails with the following error message:

/home/anthony/nosync/development/openmeteo/enhydris-web-frontend/node_modules/vue-notifications/dist/vue-notifications.js:130
export default VueNotifications;

SyntaxError: Unexpected token 'export'

The relevant configuration in jest.config.js is as follows:

  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!(vue-notifications)/)'],

I have also been using npm run test -- --clearCache regularly for reassurance. However, it appears that the transformIgnorePatterns does not have any effect.

The error message ends with :130. Is this number indicative of the line where the error occurs? Surprisingly, the problematic line export default VueNotifications is actually on line 117. Even when adding empty lines to move it down, the error still references :130. (Commenting out the line resolves the issue, but the tests fail as the export statement is necessary.)

Answer №1

It seems that there is a issue with Jest where transformIgnorePatterns does not function properly when using .babelrc, but only works with babel.config.js. To resolve this, I switched my .babelrc file to .babel.config.js and now everything is functioning correctly.

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

Update specific fields in a MySQL database using Express.js only if they are passed as parameters

After spending several days trying to set up a REST API, I found a helpful tutorial that explained the basics of sending requests and receiving responses. The only issue is that the tutorial uses MongoDB and Mongoose, while I'm working with MySQL. Due ...

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

Exploring the dynamic shift with jQuery .find

Currently, I am in the process of learning jQuery and have come across a simple issue. My goal is to change the text within a div when a link is clicked. The div in question is a duplicate of another div on the page, and my intention is to remove the copy ...

Axio GET request in VueJS does not return a response body when using Amazon API Gateway

UPDATE: While Postman and browsers are able to receive valid response bodies from an Amazon API Gateway endpoint, other web applications are not. This is a basic GET request with no headers, and no authentication is needed for the API endpoint. The data is ...

Tips for incorporating additional items into an established useState array utilizing map() or foreach()?

I'm working on developing a social media platform similar to Twitter, and I'm facing challenges with the news feed functionality. Essentially, the news feed is supposed to fetch tweets from my firebase database for each user followed by the curre ...

Slick carousel not functioning properly with Angular slickGoTo

I am currently working with the angular-slick-carousel library. Unfortunately, I am encountering an issue where the Slick methods, such as slickGoTo(), are not functioning as expected. Below is my Controller setup following the provided documentation: $s ...

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

Terminate all dormant MySQL pool connections using Node.js

In my project involving node.js and connection pooling, I have noticed that despite releasing connections after each query as shown below: return new Promise((resolve, reject) => { sql.getConnection(function (err, conn) { if (err) { ...

Tips for displaying the html content saved in the database onto an ejs webpage

This task seems simple, but I'm struggling to solve it. In my Node.js/Express webapp, I have the Quill.js editor installed. It stores my description in MySQL DB like this: <p><strong>This is the quill data. How are we doing dev?</stron ...

React's Dynamic Table fails to rerender when updated values are placed in the same row and under the same header

Here is the table generated by my functional component: <table class="table"> {/* Consonant Table */} <tr> <th colSpan="2">---</th> {headersPOA. ...

Choose the designated radio button option automatically depending on the value received from the server

In the process of creating a quiz engine using angularjs, I have successfully loaded questions with options and implemented the NEXT and BACK buttons. However, I am facing a challenge with pre-selecting the previously chosen option when the user clicks the ...

Is there a way to retrieve the text of li elements without assigning them IDs?

I have a list of names with four items inside it. My goal is to display the text of the selected name while hiding the others. Only one name should be visible at a time on the page. <ul id="names"> <li>John</li> <li>Alex</ ...

utilize Angular's interface-calling capabilities

In the backend, I have an interface structured like this: export interface DailyGoal extends Base { date: Date; percentage: number; } Now, I am attempting to reference that in my component.ts file import { DailyGoal } from '../../interfaces' ...

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

The cropper fails to load within the image element inside a modal pop-up

Utilizing fengyuanchen's cropper library, I am cropping an uploaded image and then submitting it to a form. <div id="change-dp" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk ...

Step-by-step guide on inserting a div element or hotspot within a 360 panorama image using three.js

As I work on creating a virtual tour using 360 images, I am looking to include hotspots or div elements within the image that can be clicked. How can I store data in my database from the event values such as angle value, event.clientX, and event.clientY wh ...

utilizing jQuery to deliver a $.post request to a .aspx file

Recently, I started following a jQuery tutorial on the phpAcademy channel hosted on thenewboston. In this tutorial, they demonstrate how to create an email validation form using ASP.net instead of PHP. However, despite following all the steps in the tutor ...