Setting up Jest to run in WebStorm for a Vue project with TypeScript can be done through

I am struggling to run all my tests within WebStorm. I set up a project with Babel, TypeScript, and Vue using vue-cli 3.0.0-rc3. My run configuration looks like this:

https://i.stack.imgur.com/7H0x3.png

Unfortunately, I encountered the following error:

● Test suite failed to run

/Users/calberca/Tmp/test-3/src/components/HelloWorld.vue:2
import "core-js/modules/es6.promise";
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

  1 | import { shallowMount } from "@vue/test-utils";
> 2 | import HelloWorld from "../HelloWorld.vue";
    | ^
  3 | 
  4 | describe("HelloWorld.vue", () => {
  5 |   it("renders props.msg when passed", () => {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/components/__tests__/HelloWorld.spec.ts:2:1)

Running yarn test:unit in the console passes the test, but running jest --config=jest.config.js causes it to fail.

My assumption is that ts-jest might not be properly transforming the code with Babel, and I suspect that there might be a setting in vue-cli that handles this. However, I am unsure of how to adjust my command to make it work.

Note: In a larger project, about 80% of the tests pass, but some still fail due to similar ES6-related errors.

Edit

Surprisingly, the issue was resolved after updating to Webstorm 2018.3 without any additional modifications :)

typescriptvue.jswebstorm

Answer №1

My solution involved configuring the following:

https://i.stack.imgur.com/V6FYn.png

To get this to work, I made changes to the jest.config.js file like so:

module.exports = {
moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'vue'
],
transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
},
moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
},
testMatch: ['<rootDir>/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))'],
snapshotSerializers: [
    'jest-serializer-vue'
]

}

Answer №2

After trying various solutions, implementing the following code snippet in my jest.config.js file resolved the issue:

 globals: {
        'ts-jest': {
            skipBabel: true
        }
    }

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

Exporting a value from a class in Angular 2 using TypeScript

import {TranslateService, LangChangeEvent} from "@ngx-translate/core"; class CustomLanguageExporter { public currentLang : string; constructor(private translate : TranslateService) { } public static setLanguage(): string { this.tr ...

angulartypescriptangular-i18n

Experiencing an issue with mui/material grid causing errors

An error occurred in the file Grid2.js within node_modules/@mui/material/Unstable_Grid2. The export 'createGrid' (imported as 'createGrid2') could not be found in '@mui/system/Unstable_Grid' as the module has no exports. Desp ...

reactjstypescriptmaterial-ui

When utilizing the Turf.nearPoint() function, it is important to consider the type of point being used. The documentation for Turf.nearestPoint() appears to be inaccurate

I have some code that needs to be transcribed from another system, so unfortunately I can't easily share it here. If I could, I would just post the entire project. Recently, I attempted to integrate into our project but encountered error messages. T ...

typescriptleafletturfjs

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

javascriptcssvue.js

What is preventing me from using property null checking to narrow down types?

Why does TypeScript give an error when using property checking to narrow the type like this? function test2(value:{a:number}|{b:number}){ // `.a` underlined with: "Property a does not exist on type {b:number}" if(value.a != null){ ...

typescript

What could be causing the content in my select box to change only when additional select boxes are introduced?

When working with a form in next.js and using select boxes from material UI, I encountered an issue. The number of select boxes should change based on user input, but when I modify the value inside a select box, the displayed text does not update until I a ...

node.jstypescriptnext.jsmaterial-ui

Encountering an error in TypeScript and ng2 rc.1: Error message (20, 15) TS2304 indicates that the name 'module' cannot be found

Having trouble with TypeScript and ng2 rc.1 - getting Error:(20, 15) TS2304: Cannot find name 'module'. I encountered this issue when trying to use a directive of the module in my code: @Component({ selector: 'Notes1', moduleI ...

typescriptangular

What is the process for accessing getters and mutations within a Vuex module?

As I make the transition to using Vuex instead of my custom store object, I have come across some challenges with understanding the documentation in comparison to other resources within the Vue.js community. For example, if I have a Vuex module named &apos ...

vue.jsvuex

Transitioning from one provider to another and encountering the error message "Cannot read property prompt of undefined."

This is an example of an alert service in TypeScript public Alert = { prompt: () => { return new Promise((resolve, reject) => { let prompt = this.alertCtrl.create({ title: 'Enter username', ...

angulartypescriptionic2ionic3ionic2-providers

Generating a UTC timestamp in TypeScript

I am currently facing an issue with my application where I need to ensure that it always uses UTC time, regardless of the system time. I have a method in place to create a date: public static createDate(date: Date = new Date()): Date { return new Dat ...

typescriptdatedatetimeutcdate-formatting

Potential explanation for unexpected Typescript initialization error

I am encountering the compiler error The property 'options' is not initialized or assigned in the constructor. However, upon reviewing the code for the respective class, it is clear that this reported error does not accurately reflect the actual ...

typescript

Angular does not include a particular parameter in the HTTP request

I am currently facing an unusual issue in Angular and Ionic 2 related to a specific provider I have set up. Here is the code snippet: getTransportations = function (category, maxResults) { let url = `${this.domain}/wp-json/gf/v2/forms/1/entries? ...

angulartypescriptionic2

What is the best way to execute 2 statements concurrently in Angular 7?

My goal is to add a key rating inside the listing object. However, I am facing an issue where the rating key is not displaying on the console. I suspect that it might be due to the asynchronous nature of the call. Can someone help me identify what mistak ...

javascriptangulartypescriptasynchronoussynchronous

A guide on implementing Angular ngbPopover within a CellRenderer for displaying in an ag-grid cell

I successfully set up an Angular Application and decided to utilize ag-grid community as a key component for displaying data from a backend API in tables, using fontawesome icons to enhance readability. While everything looks fine and my application is fu ...

javascriptangulartypescriptag-grid

What is the method for adding pages to the ion-nav component in Ionic with Angular?

How can I implement a UINavigationController-like functionality in iOS using an ion-nav element? The example provided here is in Javascript, but I need assistance with implementing it in Angular. Specifically, I'm unsure of how to programmatically add ...

javascriptnode.jsangulartypescriptionic-framework

Discover the type of generic keyof in TypeScript

My types implementation is structured as follows: type GenericType<T, K extends keyof T = keyof T> = { name: K; params: T[K] } type Params = { a: 1; b: 2; } const test: GenericType<Params> = { name: "a", params: 2 } ...

typescript

Exploring the capabilities of UIGrid in conjunction with TypeScript DefinitelyTyped has been a

I've noticed that the latest release of UI Grid (RC3) has undergone significant architectural changes compared to nggrid. I am encountering some problems with the definitelytyped files for nggrid because they are from a different version. Will there ...

angularjstypescriptng-griddefinitelytyped

Initializing data in VueJS for objects that do not already exist

I'm currently using Ajax to populate data properties for multiple objects, but the properties I want to bind to don't exist at the time of binding. For example: <template> <my-list v-bind:dataid="myobject ? myobject.data_id : 0">& ...

javascriptajaxvue.jsvuejs2

Ways to resolve the issue of npm being unable to globally install typescript

While trying to globally install TypeScript using npm sudo npm install -g typescript An error occurs during the installation process with the following message: ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/typescript/bin/ ...

node.jstypescriptnpmnpm-installnode-modules

Contrasts in data manipulation within Vue.js

I have been trying to understand the reason behind this issue, but it remains a mystery to me. Let me share the code and explain the situation. I am baffled by why this problem persists and it's driving me absolutely crazy! Button: <a href=" ...

laravelvue.jsaxios