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

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rather reco ...

javascriptangulartypescriptinternationalization

What are the steps to utilize a personalized validation access form within a component?

I created a unique validator to verify if an email already exists in the database before saving a new user, however, it appears that the validator is not functioning properly. Here is my template: <form class="forms-sample" #f="ngForm" (ngSubmit)="onS ...

angulartypescript

Ionic 2 faced an unresolved core-js dependency issue

Recently, I started working on a new Ionic 2 project and encountered an issue when trying to incorporate https://github.com/afrad/angular2-websocket. Upon installation, I received the warning message: UNMET PEER DEPENDENCY core-js@^2.4.1 The template pro ...

angulartypescriptnpmionic2

Invoke a function and assign it to an export variable

I have a query regarding a file containing an export constant that is utilized to construct a navigation bar in CoreUI. However, I am exploring methods to generate dynamic JSON data within other Components or the same file and then inject it into the exp ...

angulartypescriptcore-ui

What are some techniques for streamlining this code with Typescript?

I am currently working with the following code snippet: let doNavigate = this.currentScreen === removedFqn; if (doNavigate) { location.reload(); } Does anyone have any suggestions on how I can simplify this code using Typescript? ...

javascriptangulartypescript

Implement a personalized Laravel Dusk selector with the attribute data-dusk

In the world of Laravel Dusk, the default selector hunts for the dusk="something" attribute in your HTML. If you want to dive deeper into this topic, check out this resource. However, when it comes to compatibility with Typescript for React/Vue, ...

reactjstypescriptlaravelvue.jslaravel-dusk

Show only the items in bootstrap-vue b-table when a filter is actively applied

How can I set my bootstrap-vue b-table to only show items when a filter is applied by the user (i.e., entered a value into the input)? For example, if "filteredItems" doesn't exist, then display nothing? This is primarily to prevent rendering all rows ...

javascriptvue.jsbootstrap-vue

The Observable.subscribe method does not get triggered upon calling the BehaviorSubject.next

In my Navbar component, I am attempting to determine whether the user is logged in or not so that I can enable/disable certain Navbar items. I have implemented a BehaviorSubject to multicast the data. The AuthenticationService class contains the BehaviorSu ...

typescriptangularbehaviorsubject

Express Server Providers for Angular 17's Server-Side Rendering

I attempted to share my request and response object with the Angular application by defining Providers in the "server.ts" file. However, when injecting them into app.component, they always appear undefined regardless of whether I am in the server or clie ...

angulartypescriptserver-side-renderingangular-providers

Encountering an issue while attempting to initiate a nested array: "Cannot assign a value to an optional property access in the left-hand side of an assignment expression."

I am dealing with an object that contains nested arrays, structured like this: export class OrdenCompra { public id?: number, public insumos?: OrdenCompraInsumo[], } export class OrdenCompraInsumo { id?: number; traslados?: IImpuestoTraslado[]; } export ...

arraysangulartypescript

I'm encountering an issue where Typescript is unable to locate the Firebase package that I

I have a TypeScript project that consists of multiple .ts files which need to be compiled into .js files for use in other projects. One of the files requires the firebase package but it's not being found. The package is installed and located inside t ...

typescriptfirebasenpm

React is not displaying the most recent value

During the initial rendering, I start with an empty array for the object date. After trying to retrieve data from an influxDB, React does not re-render to reflect the obtained results. The get function is being called within the useEffect hook (as shown in ...

reactjstypescriptuse-effectreact-dom

Can a React.tsx project be developed as a standalone application?

As a student, I have a question to ask. My school project involves creating a program that performs specific tasks related to boats. We are all most comfortable with React.tsx as the programming language, but we are unsure if it is possible to create a st ...

reactjstypescript

The classification of a property is determined by the types of the other properties present

I am trying to figure out a way in Typescript to create a general component that takes a prop called component, with the remaining props being specific to that component. How can I achieve this? For example: <FormField component={Input} ... /> Thi ...

reactjstypescriptreact-native

Why are my pages not refreshing when the URL changes with hash history?

Experiencing an issue with Vue + NUXT while in hash mode, yet no issues in regular history mode. After changing the URL from /#/test/1 to /#/test/2, the $router updates correctly, but reactivity is not triggered. How can I properly trigger reactivity when ...

vue.jsnuxt.js

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

I am facing the challenge of calling a simple websocket closure API when the browser is closed in my project. I attempted to utilize HostListener, but unfortunately it did not work as expected. You can find the code snippet below: https://stackblitz.com/ ...

angulartypescript

Building a filter for a union type in TypeScript: a step-by-step guide

Allow me to present an example to demonstrate my current objective. const v1: { type: "S"; payload: string } = { type: "S", payload: "test" }; const v2: { type: "N"; payload: number } = { type: "N", payload: 123 }; type Actions = typeof v1 | typeof v2; ...

typescript

State management using Vuex: dynamically updating values in components based on their indices and sharing the updated values with other components

I've hit a roadblock and I need your assistance. I've been struggling for the past few days with mutations and actions in Vuex, but the solutions I've found online don't quite fit my specific case. Here's the situation: Setup: - T ...

vue.jsvuejs2vuex

When attempting to send an email with nodemailer, an error message popped up saying "setImmediate is not defined."

let transporter = nodemailer.createTransport({ host: "sandbox.smtp.mailtrap.io", port: 2525, auth: { user: "xxxxxx", pass: "xxxxxx" }, tls: { rejectUnauthorized: false } ...

typescriptemailnext.jsnodemailer

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Currently, I am faced with a common challenge. I have a database object that is a standard JS object originating from a document database, and my goal is to transmit this object to the client. However, certain fields contain sensitive information that shou ...

javascriptjsontypescriptdry