I'm having trouble executing jest in my typescript-vue project

https://i.sstatic.net/kKqKy.png

package.json

{
  "name": "application",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build ",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service build --watch --mode=development",
    "test": "jest tests/.*test.ts",
    "watchTest": "jest --watch tests/.*test.ts"
  },
  "dependencies": {
    "@quasar/extras": "^1.6.4",
    "@types/node": "^14.0.3",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue": "^2.6.11",
    "vue-browser-acl": "^0.13.5",
    "vue-class-component": "^7.2.3",
    "vue-i18n": "^8.16.0",
    "vue-infinite-loading": "^2.4.5",
    "vue-moment": "^4.1.0",
    "vue-property-decorator": "^8.4.2",
    "vue2-dropzone": "^3.6.0",
    "vuedraggable": "^2.23.2",
    "vuex": "latest",
    "vuex-class": "^0.3.2",
    "vuex-module-decorators": "^0.16.1",
    "vuex-persist": "^2.2.0"
  },
  "devDependencies": {
    "@types/jest": "^25.2.1",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "@vue/cli": "^4.3.1",
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-typescript": "^4.3.1",
    "@vue/cli-service": "^4.3.1",
    "@vue/eslint-config-typescript": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.1",
    "babel-plugin-transform-imports": "1.5.0",
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "html-loader": "^1.1.0",
    "jest": "^26.0.1",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "typescript": "~3.8.3",
    "vue-cli-plugin-quasar": "~2.0.0",
    "vue-template-compiler": "^2.6.11",
    "webpack-assets-manifest": "^3.1.1"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

babel.config.js

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "transform-imports",
      {
        "quasar": {
          "transform": "quasar/dist/babel-transforms/imports.js",
          "preventFullImport": true
        }
      }
    ],
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "node",
      "@types/jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I have encountered an error that I'm uncertain about. Could it be that Jest doesn't understand TypeScript or maybe it's related to Vue? When researching this issue online, most people seem to have problems with the "import" keywords rather than a variable. Adding babel-plugin-proposal-class-properties didn't help either. Since I don't fully comprehend the error and can't find similar issues online, it's challenging for me to resolve it. Any assistance would be greatly appreciated.

typescriptvue.jsjestjs

Answer №1

Consider installing ts-jest to optimize your code.

Ensure to include the transform and moduleFileExtensions settings in your package.json file.

{
  "jest": {
      "transform": {
        '^.+\\.ts?$': 'ts-jest',
        '.*\\.(vue)$': 'vue-jest'
      },
      "moduleFileExtensions": ['ts', 'js', 'vue']
  }
}

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

What is the reason behind the error Generic indexed type in Typescript?

Here is a scenario where I have a specific generic type: type MapToFunctions<T> = { [K in keyof T]?: (x: T[K]) => void; }; It functions correctly in this instance: type T1 = { a: string }; const fnmap1: MapToFunctions<T1> = { a: (x: st ...

typescripttypescript-generics

Managing sessions in Typescript using express framework

Hey there, I'm just starting to learn about TypeScript and I have a question about how sessions are handled in Typescript. Could someone please explain the process of session initialization, storing user data in sessions, etc.? If you have any tutoria ...

node.jstypescriptexpresssessionsession-management

The air-datepicker functionality seems to be malfunctioning within an Angular 4 environment

When using static HTML, it's quite simple to integrate Air Datepicker by following the documentation available at : <html> <head> <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> <scr ...

angulartypescript

Returning Props in Dynamic Components with Vue 3

Exploring the capabilities of Vue3's Dynamic Component <component>, I am currently working with this setup: Component 1: <template> <div> <h1> Name Input: </h2> <Input :model="props.name" /> ...

javascriptvue.jsdynamicvue-componentreactive

What is the significance of the dollar sign prefix ($) in Vue.js?

Can you explain the significance of the dollar symbol prefix used before property names in Vue.js? For instance, consider this code snippet: this.$emit('clicked', 'demo') ...

javascriptvue.jsvuejs2dollar-sign

What is the best way to transfer data to a component that is not directly related

I am looking to showcase an image, title, and description for a specific recipe that I select. Here is my setup using ItemSwiper (parent): <template> <Slide v-for="recipe in storeRecipe.data" :key="recipe.rec ...

javascriptvue.jsvuejs3storepinia

Utilizing Vue Router for service integration

I have configured my vue router for external components and services, setting it up as follows: /* Router.ts */ import { myRoute } from './views/myRoute.vue' const router = { routes: [ { name: 'my-router', ...

vue.jsvue-router

Change the size of the font with a slider in VueJS

I have been utilizing the project found at This particular project allows end-users to reuse Vue components as editable sections by providing a styler overlay for adjusting content within a div or section. After installation, I added a slider which now ap ...

javascriptvue.jsslider

What are the steps to extract information from an observable?

Having trouble retrieving data from a request? I've encountered an issue where the data retrieved inside .subscribe in an observable function is returning as undefined when trying to access it outside the function. It's quite frustrating! Here i ...

angularjstypescript

What is the best way to enable external access to a class component method in React and Typescript?

I am currently working on a component library that compiles to umd and is accessible via the window object. However, I need to find a way to call a class component's methods from outside the class. The methods in my classes are private right now, but ...

reactjstypescriptref

The method of having two consecutive subscribe calls in Angular2 Http

Can the Subscribe method be called twice? I am attempting to create an API factory that stores data in the factory and allows different components to use that data for each AJAX call. The factory: export class api { result = []; constructor (p ...

typescriptangularangular2-http

Yelp API call resulting in an 'undefined' response

When attempting to make an API call using the yelp-fusion, I noticed that the logged result is showing as undefined. It seems like this issue might be related to promises or async functions. It's important for me to maintain this within a function sin ...

javascripttypescripthttpfetchyelp

Determining the return type based on an optional generic type in TypeScript

I have created a function that generates an object (map) [key] : value from an array. My goal is to make the value method optional, and if not provided, simply return the item as it is. Here is the code I have written: export default class ArrayUtil ...

typescriptgenericsoption-type

Error: Child component received an undefined prop

Within my parent component, I have three child components. The first child component is a form that, upon submission, passes data to the second and third child components through props via the parent component. However, in one of the child components, the ...

javascriptvue.jsvue-componentvue-props

Experience the power of VueJS 3 with Pinia, all without the need

I've hit a wall. Despite scouring documentation and countless google searches, I can't seem to find the answer to this straightforward query: how do I install/import PINIA in a VUE application? Let's consider a basic VUE app: <div id=&qu ...

javascriptvue.jspinia

Incorporate a JavaScript array into a TypeScript document

Having a file named array.js with a large collection of strings, structured like this: module.exports = ["word1","word2",...] I attempted to utilize this array in my validation.ts file by adding the following line: let wiki = require('./array.js&a ...

javascriptnode.jsexpresstypescript

Tips for implementing Bootstrap pagination in VueJS 2

Here is how my website appears: Jobs.vue: <div id="jobs" class="job-item" v-for="(item, index) in showJobs" :key="index" > <router-link ...

javascriptvue.jsvuejs2vuejs3bootstrap-vue

Running a Typescript ES6+ server-side with .NET Core and Node.js is made easy with Jering.Javascript.NodeJS. Learn how to set

I am trying to run some TypeScript code written in ES2020 on the server side. Currently, I have an ASP.NET Core application running, so my idea was to execute JavaScript via Jering.Javascript.NodeJS and Node.js. I started with a simple example. var test = ...

c#node.jstypescript.net-coreecmascript-2020

Getting into a slot within a nested component within the render function

Currently using Vue 3 and I have a component with a render() function structured like this: render() { return ( <my-component> <div ref="cont" slot="cont">content</div> <my-component> ) } In addition, w ...

vue.jsvuejs3

Creating a variable name dynamically using Typescript

I am looking to efficiently create multiple instances of variables and assign values in a single statement, an example of which is shown below. this.myList1[data.id] = data.id + "-" + data.desc; this.myList2[data.id] = data.id + "-" + data.desc; this.myLi ...

typescriptdynamic