CODEWITHSUNDEEP
typescriptvue.jswebstorm
César Alberca
César Alberca

Reputation: 2681

Configure jest run configuration inside WebStorm for Vue + TypeScript

I want to execute all my tests within WebStorm, but I cant get it working. I generated a project with Babel, TypeScript and Vue using vue-cli 3.0.0-rc3. My run configuration is as follows:

enter image description here

However I get 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)

When I run yarn test:unit from console the test passes. But when I run jest --config=jest.config.js the test fail.

My initial thought is that it has to do with ts-jest not transforming the code with Babel, and vue-cli somehow toggles an option to do that and I want to use the same command, but I have no idea about what I should do to make it work.

Note: I did this with a bigger project and like 80% of tests pass, but there are still tests that don't pass with similar errors regarding ES6 and beyond features.

Edit

It somehow got solved with a new update from Webstorm (2018.3) and I had to do nothing :)

Upvotes: 0

Views: 1259

Answers (2)

Alex Kuznetsov
Alex Kuznetsov

Reputation: 1

Adding this to jest.config.js worked for me

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

Upvotes: 0

lena
lena

Reputation: 93728

works for me using the following configuration:

enter image description here

I had to change the jest.config.js as follows to make this work:

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'
]

}

Upvotes: 1

Related Questions