I'm trying to set up unit testing in Vue using Jest. However, I'm getting this error:

● Test suite failed to run
...
SyntaxError: Cannot use import statement outside a module

 >1 | import editUser from '@/ponents/forms/editUser.vue';
    | ^
  2 | import TestComponent from '@/pages/user/UserMyProfile.vue';
  3 | import { shallowMount } from '@vue/test-utils';
  4 | import { expect } from 'chai';
  5 | import 'jest';

My Jest configuration in package.jsonlooks like this:

"jest": {
    "moduleFileExtensions": [
        "js",
        "ts",
        "json",
        "vue"
    ],
    "transform": {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.tsx?$": "ts-jest"
    },
    "testURL": "http://localhost/",
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    "modulePaths": [
        "<rootDir"
    ],
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "preset": "@vue/cli-plugin-unit-jest/presets/no-babel"
},

I have tried countless examples from other questions, but I can't seem to solve the issue.

Edit: For the record, I'm using TypeScript

I'm trying to set up unit testing in Vue using Jest. However, I'm getting this error:

● Test suite failed to run
...
SyntaxError: Cannot use import statement outside a module

 >1 | import editUser from '@/ponents/forms/editUser.vue';
    | ^
  2 | import TestComponent from '@/pages/user/UserMyProfile.vue';
  3 | import { shallowMount } from '@vue/test-utils';
  4 | import { expect } from 'chai';
  5 | import 'jest';

My Jest configuration in package.jsonlooks like this:

"jest": {
    "moduleFileExtensions": [
        "js",
        "ts",
        "json",
        "vue"
    ],
    "transform": {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.tsx?$": "ts-jest"
    },
    "testURL": "http://localhost/",
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    "modulePaths": [
        "<rootDir"
    ],
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "preset": "@vue/cli-plugin-unit-jest/presets/no-babel"
},

I have tried countless examples from other questions, but I can't seem to solve the issue.

Edit: For the record, I'm using TypeScript

• javascript
• unit-testing
• vue.js
• jestjs

1 Answer 1

The problem is some of the (node_) modules you're using need to be transpiled and some don't. So you'll need to play with this syntax until you find the ones which need to be ignored:

"jest": {
  // what you already have...
  transformIgnorePatterns: [
    "node_modules/(?!(a-module"
      + "|another-module"
      + "|yet-another-module"
      + ")/)",
  ]
}

... where a-module, another-module and yet-another-module are the modules you want ignored.
If you look closely at the error, you'll typically find the name of the module causing it. However, if you can't figure it out, try with every single module imported in editUser.vue has and then remove them one by one until you find the minimal amount of modules to be ignored.