Converting dependencies during Jest test execution

Recently, I introduced tiptap-vuetify as a dependency in my Vue application, triggering the addition of 19 other modules as transitive dependencies. After integrating it, I proceeded to run my tests only to encounter the following error:

Jest encountered an unexpected token

This error typically arises when attempting to import a file that Jest is unable to interpret, such as a non-plain JavaScript file.

By default, Jest utilizes a Babel configuration for file transformation, with the exclusion of "node_modules".

To resolve this issue, consider the following options:
 • Specify a custom "transformIgnorePatterns" in your configuration to transform certain "node_modules" files.
 • If a custom transformation is required, define a "transform" option in your configuration.
 • To mock non-JS modules, such as binary assets, utilize the "moduleNameMapper" config option.

For detailed information and examples of these configuration options, refer to the documentation:
https://jestjs.io/docs/en/configuration.html

SyntaxError: Unexpected token 'export'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at node_modules/tiptap-vuetify/dist/bundle-umd.js:1:112
  at Object.<anonymous> (node_modules/tiptap-vuetify/dist/bundle-umd.js:1:2)

It appears that tiptap-vuetify contains code that requires transpilation by Jest. As mentioned in the Jest documentation, adding the following snippet to the jest.config.js file should address the issue if the untranspiled code resides in either tiptap or tiptap-vuetify:

transformIgnorePatterns: [
  "node_modules/(?!(tiptap-vuetify|tiptap)/)"
]

Despite implementing this solution, the problem persisted. As an alternative approach, I tried the following adjustment:

transformIgnorePatterns: ['/node_modules/tiptap.*']

Subsequently, the issue no longer persisted. However, I suspect that I am now transpiling my entire dependency tree, leading to longer test execution times. Is there a more efficient resolution to this predicament?

javascriptvue.jsjestjsbabel-jest

Answer №1

Troubleshooter is not the root cause of the issue, despite the misleading error message.

The error is likely originating from SolutionFinder, as indicated in the Jest error Details output:

    Jest encountered an unexpected token

    //...

    Details:
                                                         👇
    /Users/tony/src/tmp/vue2-vuetify-test/node_modules/SolutionFinder/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      11 | <script>
      12 | // import the component and the necessary extensions
    > 13 | import { Troubleshooter, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'troubleshooter'
         | ^
      14 |
      15 | export default {
      16 |   // specify Troubleshooter component in "components"

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at node_modules/troubleshooter/dist/bundle-umd.js:1:201
      at Object.<anonymous> (node_modules/troubleshooter/dist/bundle-umd.js:1:429)
      at Object.<anonymous> (src/components/MyTrouble.vue:13:1)

Ensure that the transformIgnorePatterns excludes SolutionFinder for proper transpilation:

// jest.config.js
module.exports = {
  transformIgnorePatterns: ['/node_modules/(?!solutionfinder)'],
}

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

Can transclusion be achieved while maintaining the directive's scope in Angular?

Can we achieve the following functionality in Angular? <div ng-controller="MainCtrl" ng-init="name='World'"> <test name="Matei">Hello {{name}}!</test> // I expect "Hello Matei" <test name="David">Hello {{name}}!&l ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Looking to extract data from an HTML page, a simplified example is provided below. Upon running the code, I anticipate the output to be [ "foo", "baz", "quux", ] but instead encounter an error message stating "TypeError: anch ...

javascripthtmljquerycheerio

Real-time database logging triggered by Firebase user authentication

exports.setupDefaultPullups = functions.auth.user() .onCreate( async (user) => { const dbRef= functions.database.ref; let vl= await (dbRef.once('value').then( (snapshot) => { return snapsh ...

javascriptfirebasefirebase-realtime-databasegoogle-cloud-functions

Bring in a collection of classes of various types from one TypeScript file to another

In my code file exampleA.ts, I define an object as follows: import { ExampleClass } from 'example.ts'; export const dynamicImportations = { ExampleClass }; Later, in another file named exampleB.ts, I import an array that includes class types and ...

javascripttypescript

Is there a way to merge two separate on click functions into one cohesive function?

I currently have two separate onclick functions as shown below. They are functioning properly but I am considering combining them for optimization purposes. Essentially, clicking on xx displays certain elements, hides others, and adds a class. Clicking o ...

javascriptjqueryquery-performance

What is the best way to consistently apply parent transforms to child elements in the same sequence?

Within my software, users have the ability to select 3D objects on a workplane and then scale, move, or rotate these elements collectively using a "transformation" container. This container, represented by an Object3D, groups all transformations and applie ...

javascriptthree.js

Error: VueQuill Vue3 encountered an issue while trying to read properties of undefined with the message "emit"

Incorporating VueQuill into my vue3 application is resulting in the following console error when attempting to display an HTML string - https://i.stack.imgur.com/KGQqD.png This is my code snippet: <template> <div class=""> & ...

javascriptvue.jsvuejs3quillvue-quill-editor

Creating a distinctive appearance for JavaScript's default dialogue box

Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...

javascriptcss

What's the best way to conceal the navbar while attempting to print the page?

Currently, I am working on developing an application for my school project. One of the features is an invoice sheet with a print option. However, when I try to print by clicking the button or using ctrl+p, the navbar appears in a chaotic and disorganized m ...

javascriptcssvue.js

Angular is using double quotes (%22) to maintain the integrity of the data retrieved from JSON responses

After running a PHP script, the following response is returned: {"result": "0", "token":"atoken" } To execute the script with Angular, the following code is used: $http.post( API["R001"], $scope.user, {}).then($scope.postSuccess, null); Upon successful ...

javascriptjsonangularjsparsingcookies

Encountering an unanticipated reference error while attempting to paste the data

// Modify the layout function document.addEventListener('DOMContentLoaded', function() { function modifyLayout(productId) { // Referencing the original card and detailed card const originalCard = document.querySelector(&ap ...

javascripthtmlbootstrap-5

Two separate entities link to a shared occurrence

Two namespaces are at play here: '/' and /notification If I trigger an event in the '/' namespace, how can I listen to the same event in the '/notification' namespace? It would be helpful if someone could provide an explanati ...

javascriptnode.jsexpresswebsocketsocket.io

Implementing the rendering of HTML stored in an array in Angular

I have an array that includes an object with HTML elements which I would like to render in Angular. Here is the array: { name: "rules", key: "rules", value_before: "<tr><td>revisit_in_some_days</td><td>less_then</td>td> ...

javascriptarraysjsonangular

`Make Bootstrap 5 Modal centered horizontally`

I'm facing an issue with my Vue application where the Bootstrap 5 modal is not horizontally centered on desktop. Below is the code snippet of my component: Modal.vue <template> <teleport to="#modal-container"> <div ...

htmlcsstwitter-bootstrapvue.jsbootstrap-modal

What is the process for changing to a different page in NativeScript?

Having trouble creating a simple button in NativeScript labeled 'login'? I've created a login component, but when testing the code, it shows an error stating "no known component for element Login." <template> <Page> <TabV ...

javascriptvue.jsnativescriptnativenativescript-vue

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for ...

javascripthtmlcssdropdown

Using JavaScript to Retrieve URLs and Identify HTTP Status Code 403

In my JavaScript code, I am attempting to retrieve a 403 Forbidden response code using JavaScript. I have tried modifying the following code, but it does not seem to be working for me: <script type="text/javascript"> var request = new XMLHttpRequ ...

javascriptajaxhttp-status-code-403

Using the result of one function in another function when using async await

I am facing an issue with running a function based on the return value of another function: // in utils.js methods:{ funcOne(){ // do some thing return true } } //in component.vue methods:{ funcTwo(){ let x = this.funcOne() if(x){ ...

javascriptvue.jsvuejs2nuxt.js

Does it follow standard practice for Array.filter to have the capability to also perform mapping on an array of objects?

While experimenting with Array.filter, I made an interesting discovery. By forgetting to include an equality check, my array was unexpectedly mapped instead of filtered. Here is the code snippet that led to this result: const x = [{ name: 'user' ...

javascripttypescriptecmascript-6filter

The JavaScript library known as Microsoft JScript Angular is not recognized

While integrating Angular into my .Net MVC website, I keep running into a runtime error that reads as follows: 0x800a1391 - Microsoft JScript Runtime Error: 'angular' is undefined. This essentially means that the 'angular' object ...

javascript.netasp.net-mvcangularjsvisual-studio