vuejs with vite jest and vue-util-testing getting SyntaxError: Cannot use import statement outside a module

Viewed 416

Using the base project https://github.com/antfu/vitesse-webext I need to add the unit test capability, but getting error: SyntaxError: Cannot use import statement outside a module.

I extended the above repo like this installed packages:

npm install -D @types/jest @vue/test-utils@next jest ts-jest vue3-jest

// jest.config.js
module.exports = {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue',
  ],
  transform: {
    '^.+\\.vue$': 'vue3-jest',
    '^.+\\.ts$': 'ts-jest',
  },
}

ts config:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "ESNext",
    "target": "es2016",
    "lib": ["DOM", "ESNext"],
    "strict": true,
    "esModuleInterop": true,
    "incremental": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "forceConsistentCasingInFileNames": true,
    "types": [
      "vite/client",
      "@types/jest"
    ],
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "exclude": ["dist", "node_modules"]
}

add cmd "test": "jest src" to package.json, while exeucting the command getting following error:

Details:

    /sandbox/src/contentScripts/views/App.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { defineComponent as _defineComponent } from 'vue';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { shallowMount } from '@vue/test-utils'
    > 2 | import App from './App.vue'
        | ^
      3 |
      4 | describe('App', () => {
      5 |   it('should display header text', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/contentScripts/views/App.spec.ts:2:1)
0 Answers
Related