Vue3, TypeScript, Jest, Pinia - SyntaxError: Cannot use import statement outside a module

Viewed 400

I'm trying to use pinia along jest, but I'm getting this error:

node_modules/pinia/dist/pinia.esm-browser.js:6
    import { getCurrentInstance, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, onUnmounted, reactive, toRef, del, nextTick, computed, toRefs } from 'vue-demi';
    ^^^^^^

SyntaxError: Cannot use import statement outside a module

I'm using ts-jest and @vue/vue3-jest for jest transformation.
This my jest.config.js at the moment:

module.exports = {
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  testEnvironment: "jsdom",
  transform: {
    "node_modules/vue-demi/.+\\.(j|t)s?$": "ts-jest",
  },
  transformIgnorePatterns: [
    "/node_modules/(?!pinia/.*)",
    "<rootDir>/node_modules/(?!@pinia/testing)",
    "<rootDir>/node_modules/(?!vue-demi/.*)",
    "<rootDir>/node_modules/(?!@vue/test-utils)",
  ],
  transform: {
    "^.+\\.ts$": "ts-jest",
    "^.+\\.vue$": "@vue/vue3-jest",
  },
};

Already played a lot with transformIgnorePatterns and transform but nothing so far.
For instance

transformIgnorePatterns: [
    "/node_modules/(?!vue-demi/.*)"
 ]

or

transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!vue-demi/.*)"
]

And this is my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "@types/jest"],
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.test.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

Getting the same error when importing either of these in my tests:

import <some stuff> from 'pinia';
import <some stuff> from '@pinia/testing'

Package versions:

"pinia": "^2.0.13",
"vue": "^3.2.25"
"@pinia/testing": "^0.0.12"
"@types/jest": "^28.1.1"
"@vue/test-utils": "^2.0.0-rc.18"
"@vue/vue3-jest": "^28.0.0"
"babel-jest": "^28.1.1"
"jest": "^28.1.1"
"jest-environment-jsdom": "^28.1.1"
"ts-jest": "^28.0.4"
"typescript": "^4.5.4"
"vue-tsc": "^0.29.8"

Also the projects builds correctly, no problem there.

0 Answers
Related