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

[drseu55]

Reproduction

I'm trying to use Pinia along Jest, but I'm getting the error from the title.

Steps to reproduce the bug

1. Create a boilerplate project with npm init vue@latest
2. Add required libraries for Jest npm install --save-dev jest @vue/vue3-jest @vue/test-utils@next babel-core@bridge @babel/preset-env @babel/plugin-transform-runtime jest-environment-jsdom ts-jest
3. Add configuration in separate files or in package.json
4. Create a basic test file and import setActivePinia or createPinia from pinia.
5. Execute test with Jest

Expected behavior

Being able to use Pinia with Jest.

Actual behavior

My test file looks like this.

import { mount } from '@vue/test-utils'
import HelloWorld from '../HelloWorld.vue'
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from '@/stores/counter';

describe('HelloWorld', () => {
  it('should display header text', () => {
    const msg = 'Hello Vue 3'
    const wrapper = mount(HelloWorld, { props: { msg } })

    expect(wrapper.find('h1').text()).toEqual(msg)
  })
})

I am trying to execute the test file with jest src command, but I am 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

      2 | import { mount } from '@vue/test-utils'
      3 | import HelloWorld from '../HelloWorld.vue'
    > 4 | import { setActivePinia, createPinia } from 'pinia'
        | ^
      5 | import { useCounterStore } from '@/stores/counter';
      6 |
      7 | describe('HelloWorld', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
      at Object.<anonymous> (src/components/__tests__/HelloWorld.spec.js:4:1)

My configuration for Babel and Jest file looks like this:

"babel": {
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
},
"jest": {
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "moduleFileExtensions": [
    "js",
    "json",
    "vue",
    "ts"
  ],
  "transformIgnorePatterns": [
    "/node_modules/(?!pinia/.*)",
    "<rootDir>/node_modules/(?!@pinia/testing)",
    "<rootDir>/node_modules/(?!vue-demi/.*)",
    "<rootDir>/node_modules/(?!@vue/test-utils)"
  ],
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "@vue/vue3-jest",
    "^.+\\.(ts|tsx)$": "ts-jest"
  }
},

My package versions:

"@babel/plugin-transform-runtime": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^28.0.1",
"babel-core": "^7.0.0-bridge.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"jsdom": "^19.0.0",
"ts-jest": "^28.0.5",
"vite": "^2.9.5",

Additional information

No response

[posva]

It seems like jest isn't importing the right pinia dist file (pinia.esm-browser is for native module browser usage). It should be either using the cjs or the mjs version

You also seem to not be transpiling pinia in your transformIgnorePatterns. You could remove the rule for pinia to transpile import statements.

[theolavaux]

Did the suggested answer work for you @drseu55? Doesn't seem like it solved the issue for me, I also tried adding a moduleNameMapper with '^pinia$': 'pinia/dist/pinia.cjs' inside jest.config.js but without success...

[Vue warn]: Injection "Symbol(pinia)" not found.
[Vue warn]: Error in data(): "Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production."

[casey6]

I ran into this same issue when upgrading from jest 27 to 28. It seems that jest-environment-jsdom is causing jest to pull in the wrong version of pinia (wrong version of vue too). Adding this to your jest config file should fix the issues (see vuejs/test-utils#234 (comment)):

{
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "customExportConditions": ["node", "node-addons"]
    }
}