Issue with SCSS Syntax in Vue Jest Test runner

I'm having trouble importing and mounting a component in Jest. Unfortunately, I keep getting an error message that says:

styles/variables.scss:2
$blue:#324157;
      ^

SyntaxError: Invalid or unexpected token

I've tried a few solutions, but none of them have worked for me.

Attempted Solution 1 - Using identity-obj-proxy (FAILED):

"moduleNameMapper": {
  "\\.(css|scss|sass|less)$": "identity-obj-proxy"
}

Attempted Solution 2 - Using styleMock (FAILED):

//package.json
"moduleNameMapper": {
  "\\.(css|scss|sass|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
}

//<rootDir>/tests/__mocks__/styleMock.js
module.exports = {}

Unfortunately, neither of these solutions have resolved the error for me.

javascriptvue.jssassjestjs

Answer №1

By simply including jest-transform-stub in the jest.transform configuration, I came across an alternative solution that could be beneficial to others.

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

Reference: vuejs/vue-test-utils-jest-example/issues/11

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

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code: import { functionTest } from './function_test' function runnerFunctionTest() { console.log("Test"); } export class Runner { run(source : string) { eva ...

javascripttypescriptimportevaljavascript-import

Fixing Sticky Navigation Bar on Scroll (JavaScript, HTML, CSS)

I'm working on this site as a fun side project, but I've hit a roadblock. The sticky nav bar I implemented jumps when the user scrolls down far enough. Despite reading through other discussions, I can't seem to figure out the solution. I su ...

javascripthtmlcss

even.data remains unaltered

Here is a demo I created for my own practice, and it works as expected. However, when I use line 8 (commented out in the code) instead of line 7, all input text values change to 0, which is different from the result shown in the demo. I checked the jQuery ...

javascriptjquery

Is there a way to automate the loading process when a file is uploaded to an HTML input field?

How can I upload a file via Ajax post in HTML without clicking the button? Currently, my code only works after clicking the bootstrap button. My current implementation is as follows: $(document).ready(function () { $("#but_upload").click(function () { ...

javascriptjqueryhtmlajax

Convert numeric month to its 3-letter abbreviation

Receiving the date time value from the server and storing it in a variable named a1: let a1 = (new Date(estimatedServerTimeMs)); console.log of a1 Sun Apr 05 2020 11:36:56 GMT+0530 (India Standard Time) The date is converted to a simpler format such as ...

javascriptangulartypescript

Conceal a row depending on a cell's value being equal to zero

Having an issue with hiding rows that have a zero value in the middle cells. The values in the middle cells are dynamically generated from a Google Spreadsheet. The code below successfully hides rows with zero values that I manually input, but it doesn&apo ...

javascripthtml

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

How to show the current week using React Native

Looking to show the current week of the month in a specific format using react-native: (Week 2: 05.10 - 11.10) (for example, displaying week 2 of the current month) Any ideas on how to make this happen? I'm aware of packages like momentjs that can ...

javascriptreactjsreact-nativedatemomentjs

Obtain every possible sequence of US phone number segments for a provided number

The format of a US phone number is as follows: (XXX) XXX-XXXX Given a string consisting only of digits with a length between 0 and 10, I want to generate an array of all possible chunks that match the US phone number format. For example: Input: "54" Out ...

javascriptreactjsregexalgorithm

What is the method to establish a default value for ion.rangeSlider?

Can anyone assist me in setting the default value for my input? When I submit the range within the form, it always defaults to the minimum and maximum values rather than considering the default value I specified in the input field. How can I resolve this ...

javascriptjquery

Generating duplicate uuidv4 key values within a Sequelize model

Hello, I'm new to TypeScript and Express. I've set up a UUID type attribute but it always returns the same value. 'use strict'; const { v4: uuidv4 } = require('uuid'); const { Model, Sequelize } = require('sequelize&apo ...

javascriptnode.jsexpresssequelize.jsuuid

Redux state assigns object to another object

I started with an initial state that looks like this: let initialState = { items: [ { name: 'a' }, { name: 'b' } ], otherItems: [] } I am attempting to copy the items array and assign i ...

javascriptreactjsecmascript-6redux

Is it possible for a route's URL in ui-router to be at the same level as another state while also utilizing $stateParams?

In my application, I want to implement a feature where hitting the same level of the URL will lead to either the baz state or the biz state with a parameter. angular.module('foo') .config(function($stateProvider){ $stateProvider .state(&apos ...

javascriptangularjsangular-ui-router

Exploring the process of iterating through a nested array in Firebase data structures

Here is a visual representation of the array JSON data image for reference I'm trying to extract the image data and display it within my React component. I attempted using a map inside a map function, but encountered issues. Refer to the image above ...

javascriptarraysreactjsecmascript-6

Vue router beforeRouteEnter - when the page is refreshed, the button label vanishes

<script> export default { name: 'TEST', data() { return { prevRoute: '' } }, methods: { goBack() { return this.$router.go(-1); }, }, beforeRouteEnter(to, from, next) { next(vm => { ...

javascriptvue.jsmethodsvue-routerbeforerouteenter

Tips for implementing sorting and filtering with Ajax and Json in PHP and MySQL applications

Greetings! I'm a newcomer in the world of software development, currently working on a software site. I've successfully built the pages and layout using HTML, CSS, and JavaScript, which was the easy part. Now, my challenge lies in creating main c ...

phpjavascripthtmlajaxjson

Replace the current CSS styles of a pre-installed package

I recently added a package for a type writer effect, but I'm having trouble with it not overriding the CSS styles I've set in the component. Here's an example of what I have: <template> <v-row class="hero" align-content= ...

javascriptcssvue.jssass

The patch method is failing to upload using axios

In my project using Laravel 5.8 and Vue.js 2, I have encountered a problem with the .vue file: let formData = new FormData(); formData.append('name', this.name); formData.append('image',this.image) formData.a ...

javascriptlaravelvue.jsaxiosform-data

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request. Take for instance my model: //order.model.ts export class Order { constructor(public id: num ...

javascriptangulartypescript

Why does my counter keep incrementing by more than one every time?

As I work on creating a test in jQuery, I've encountered an issue with my counter variable count. It seems to increase by more than one when the correct answer is used. function nextQuestion(){ $('#submit').show(); $('#next&apo ...

javascriptjquery