The module @vue/cli-plugin-unit-jest is expected to contain a file named "jest-preset.js" or "jest-preset.json" at its root

My project setup consists of a single folder containing only icons. I used the command vue create .

For testing, I decided to go with Jest and didn't make any additional configurations. When I try to run npm run test:unit, I encounter the following error message:

● Validation Error:

  Module @vue/cli-plugin-unit-jest should have "jest-preset.js" or "jest-preset.json" file at the root.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

Can anyone help me with this issue?

javascriptvue.jsjestjsvue-cli

Answer №1

Hey there, I actually encountered the same issue myself.

All I did was update the @vue/cli-plugin-unit-jest package and it resolved the issue for me.

I am currently using Vue version 2.6.11

and I updated @vue/cli-plugin-unit-jest to @4.5.0

npm -i -s @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d1dedb9fc2dec7d5dbdc9fc7dcdbc69fd8d7c1c6f2869c879c82">[email protected]</a>

Answer №2

Modify the following:

  preset: '@vue/cli-plugin-unit-jest',

to be replaced with:

  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.js?$': 'babel-jest'
  },

After making these changes, execute the following commands:

  • npm install --save-dev vue-jest jest-transform-stub <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67050605020b4a040815022750495749574a05150e0300024957">[email protected]</a>
  • npm uninstall @vue/cli-plugin-unit-jest

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 the text box with the value of the checkbox selected before

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <link rel="stylesheet" href="ios7-switches.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <styl ...

javascriptjqueryhtmlcheckbox

jQuery - Endless paging

My attempt at implementing infinite scrolling on my page seems to have hit a snag. Instead of triggering at the bottom of the page, it's activating when I scroll back to the top. Can anyone shed some light on what might be causing this issue? $(windo ...

javascriptjqueryscrollinfinite

Are there any techniques for importing a function with Next.js dynamic import feature? Dealing with react-component-export-image complications during Next.js server-side rendering

I encountered the 'window is not defined' error while trying to import react-component-export-image, so I implemented a dynamic import as a workaround. Although the initial error is gone, I'm now facing the issue of 'exportComponentAsPN ...

javascriptreactjsnext.js

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionalit ...

javascriptangularvideotypescript

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Monitor the automatic redrawing system of mithril.js

I am considering using mithril.js to develop a high-performance application that will involve managing thousands of DOM elements that may need frequent updates. It is crucial for me to ensure that only the necessary elements are redrawn when changes occur. ...

javascriptmithril.js

Performing the addition operation on two floating point numbers in JavaScript

The JavaScript code goes as follows: var receivedamt = parseFloat($('#cashRecText').val()).toFixed(2); console.log(receivedamt); var addon = parseFloat('5.00').toFixed(2); console.log(addon); addon = parseFloat(receivedamt).toFixed(2 ...

javascriptjqueryhtmlcss

The Selenium driver's execute_script() function is not functioning as expected

When I attempt to execute a JavaScript using driver.execute_script, nothing happens and the system just moves on to the next line of Python code. Any ideas? I've been web scraping on a webpage, using JavaScript in the Console to extract data. The Jav ...

javascripthtmlseleniumselenium-webdriverweb-scraping

Pass a collection of items from an ASP MVC application to a JavaScript function

For my university coursework, I decided to use ASP MVC. However, I encountered an issue where sending too many AJAX requests was causing the page to load very slowly. To address this problem, I thought about improving it by retrieving arrays from the datab ...

javascriptjqueryasp.netajaxasp.net-mvc

VueJS throws an error indicating that the object cannot be extended

I have encountered an issue while trying to update the promo object by adding a new field called colspan. Unfortunately, I am getting this error: uncaught (in promise) TypeError: Cannot add property colspan, object is not extensible at eval (eval at ...

javascriptvue.jsvuex

javascript update HTML content

Hello, I am trying to call a function called changeDivHTML which passes an image. <a href="javascript:void(0)" onclick="changeDivHTML(<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'>)"> This function ad ...

javascriptinnerhtml

Is there a way to efficiently add delimiters to an array using jquery dynamically?

Just joined this community and still figuring things out. I have a question - how can I use jQuery to dynamically add a delimiter like "|" after every 3 elements in an array? This way, I can explode the array and utilize the resulting arrays separately. He ...

javascriptjqueryarraysjavascript-objects

Preserving quotation marks when utilizing JSON parsing

Whenever I try to search for an answer to this question, I am unable to find any relevant results. So please excuse me if this has been asked before in a different way. I want to preserve all quotation marks in my JSON when converting from a string. In m ...

javascriptjsontypescript

How can I alter "diffuseMap" and "roughnessMap" in Three.js to become "cubeMap"?

I have a specific code snippet that I am trying to work with: var container; var camera, scene, renderer; let exrCubeRenderTarget, exrBackground; let newEnvMap; let torusMesh, planeMesh; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWi ...

javascriptthree.js

Present and Modify state variables in a personalized fashion

I am working on a React form that contains multiple fields for user input. As the user enters values into the form fields, the data is stored in the component's state. I am now faced with the challenge of displaying the state data in a specific format ...

javascriptjsonreactjsstate

The process of masking a video with alpha data from another video on canvas seems to be experiencing a

I have a unique setup on my page where I'm masking one video with another. Essentially, when the Play button is pressed, a second video slowly appears over the looping video in the background. This effect is achieved by using a black/white mask transf ...

javascripthtmlvideocanvas

Creating eye-catching images on your map with React Mapbox GL: Using Layer and Feature instead of Markers

For my project, I have integrated React Mapbox GL and encountered performance issues when using Markers for a large number of data points. After researching the documentation, I discovered a helpful tip: Note: When handling numerous objects, it is recom ...

javascriptreactjsmapbox

Tips for sending form data from ReactJS to controller in ASP.NET MVC:

Seeking help with React and ASP.NET integration. I am attempting to create a form in ASP.NET using React, but encountering issues when trying to pass form data from ReactJS to an MVC ASP.NET controller. Below is the code that I have been working on. Any su ...

javascriptasp.netasp.net-mvcreactjsasp.net-web-api

Using Electron to redirect to a different HTML file while passing GET variables

I am currently working on developing an Electron app. Within the project files, for example, I have app.html. My goal is to send GET variables like ?id=54&q=asd to the receiver.html, where I can then retrieve these id and q variables. As we all know, ...

javascriptelectron