Vitest, Vitesse, auto importing

[blowsie]

Issue description or question

I'm using wallaby with vitest and vitesse. Vitesse uses auto-importing to import some commonly used code automatically.

The vitest tests are working fine when running npm run test but wallaby doesn't appear to be working with the configuration for auto imports, and as a result, they fail

    ReferenceError: reactive is not defined
        at src/core/store/permissions.ts:19:3

This can be reproduced with this repo https://github.com/antfu/vitesse

How can I get the wallaby vite config to resolve the auto imports correctly?

Wallaby diagnostics report

{
  editorVersion: 'WebStorm 2022.2 EAP',
  pluginVersion: '1.0.248',
  editorType: 'IntelliJ',
  osVersion: 'win32 10.0.19044',
  nodeVersion: 'v18.4.0',
  coreVersion: '1.0.1290',
  config: {
    diagnostics: {
      vitest: {
        file: {
          config: "import path from 'path'\n" +
            "import { defineConfig } from 'vite'\n" +
            "import Vue from '@vitejs/plugin-vue'\n" +
            "import Pages from 'vite-plugin-pages'\n" +
            "import Layouts from 'vite-plugin-vue-layouts'\n" +
            "import Icons from 'unplugin-icons/vite'\n" +
            "import IconsResolver from 'unplugin-icons/resolver'\n" +
            "import Components from 'unplugin-vue-components/vite'\n" +
            "import AutoImport from 'unplugin-auto-import/vite'\n" +
            "import { VitePWA } from 'vite-plugin-pwa'\n" +
            "import VueI18n from '@intlify/vite-plugin-vue-i18n'\n" +
            "import Inspect from 'vite-plugin-inspect'\n" +
            "import 'dotenv/config'\n" +
            "import { PacProxyAgent } from 'pac-proxy-agent'\n" +
            '\n' +
            'export default defineConfig({\n' +
            '  resolve: {\n' +
            '    alias: {\n' +
            "      '~/': `${path.resolve(__dirname, 'src')}/`,\n" +
            '    },\n' +
            "    dedupe: ['vue'],\n" +
            '  },\n' +
            '\n' +
            '  plugins: [\n' +
            '    Vue({\n' +
            '      include: [/\\.vue$/, /\\.md$/],\n' +
            '    }),\n' +
            '\n' +
            '    // https://github.com/hannoeru/vite-plugin-pages\n' +
            '    Pages({\n' +
            "      extensions: ['vue'],\n" +
            "      dirs: [{ dir: 'src/**/pages', baseRoute: '' }],\n" +
            '    }),\n' +
            '\n' +
            '    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts\n' +
            '    Layouts({\n' +
            "      defaultLayout: 'default',\n" +
            "      layoutsDirs: './src/core/layouts',\n" +
            '    }),\n' +
            '\n' +
            '    // https://github.com/antfu/unplugin-auto-import\n' +
            '    AutoImport({\n' +
            '      imports: [\n' +
            "        'vue',\n" +
            "        'vue-router',\n" +
            "        'vue-i18n',\n" +
            "        'vue/macros',\n" +
            "        '@vueuse/head',\n" +
            "        '@vueuse/core',\n" +
            '        {\n' +
            "          axios: [['default', 'axios']],\n" +
            "          '@vueuse/integrations/useAxios': ['useAxios'],\n" +
            "          '@oen.web.vue/portal': ['useAccordion'],\n" +
            '        },\n' +
            '      ],\n' +
            "      dts: 'src/auto-imports.d.ts',\n" +
            '      eslintrc: {\n' +
            '        enabled: true,\n' +
            '      },\n' +
            '    }),\n' +
            '\n' +
            '    // https://github.com/antfu/unplugin-vue-components\n' +
            '    Components({\n' +
            '      // relative paths to the directory to search for components\n' +
            "      dirs: ['src/**/components', 'node_modules/@oen.web.vue/portal/src/**/components'],\n" +
            '      // allow auto load markdown components under `./src/components/`\n' +
            "      extensions: ['vue'],\n" +
            '      // allow auto import and register components used in markdown\n' +
            '      include: [/\\.vue$/, /\\.vue\\?vue/],\n' +
            '      // custom resolvers\n' +
            '      resolvers: [\n' +
            '        // auto import icons\n' +
            '        // https://github.com/antfu/unplugin-icons\n' +
            '        IconsResolver({\n' +
            "          enabledCollections: ['far'],\n" +
            '        }),\n' +
            '      ],\n' +
            '      // search for subdirectories\n' +
            '      deep: true,\n' +
            "      dts: 'src/components.d.ts',\n" +
            '    }),\n' +
            '\n' +
            '    Icons({}),\n' +
            '\n' +
            '    // https://github.com/antfu/vite-plugin-pwa\n' +
            '    VitePWA({\n' +
            "      registerType: 'autoUpdate',\n" +
            "      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],\n" +
            '      manifest: {\n' +
            "        name: 'epay Compliance Management Tool',\n" +
            "        short_name: 'CMT',\n" +
            "        theme_color: '#ffffff',\n" +
            '        icons: [\n' +
            '          {\n' +
            "            src: '/pwa-192x192.png',\n" +
            "            sizes: '192x192',\n" +
            "            type: 'image/png',\n" +
            '          },\n' +
            '          {\n' +
            "            src: '/pwa-512x512.png',\n" +
            "            sizes: '512x512',\n" +
            "            type: 'image/png',\n" +
            '          },\n' +
            '          {\n' +
            "            src: '/pwa-512x512.png',\n" +
            "            sizes: '512x512',\n" +
            "            type: 'image/png',\n" +
            "            purpose: 'any maskable',\n" +
            '          },\n' +
            '        ],\n' +
            '      },\n' +
            '    }),\n' +
            '\n' +
            '    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n\n' +
            '    VueI18n({\n' +
            '      runtimeOnly: true,\n' +
            '      compositionOnly: true,\n' +
            "      include: [path.resolve(__dirname, 'locales/**')],\n" +
            '    }),\n' +
            '\n' +
            '    // https://github.com/antfu/vite-plugin-inspect\n' +
            '    // Visit http://localhost:3333/__inspect/ to see the inspector\n' +
            '    Inspect(),\n' +
            '  ],\n' +
            '\n' +
            "  publicDir: 'public',\n" +
            '  server: {\n' +
            '    // Proxy\n' +
            '    proxy: {\n' +
            "      '/api': {\n" +
            '        target: process.env.VITE_PROXY,\n' +
            '        changeOrigin: true,\n' +
            '        agent: new PacProxyAgent(`${process.env.DEV_PROXY_PAC_URL}`),\n' +
            '        // for Docker only\n' +
            "        //rewrite: (path) => path.replace(/^\\/api/, ''),\n" +
            '      },\n' +
            '    },\n' +
            '  },\n' +
            '\n' +
            '  // https://github.com/vitest-dev/vitest\n' +
            '  test: {\n' +
            "    include: ['test/**/*.test.ts', '**/*.spec.ts'],\n" +
            "    environment: 'jsdom',\n" +
            '    deps: {\n' +
            "      inline: ['@vue', '@vueuse', 'vue-demi'],\n" +
            '    },\n' +
            '  },\n' +
            '})\n'
        },
        config: {
          allowOnly: true,
          watch: true,
          globals: false,
          environment: 'jsdom',
          threads: true,
          clearMocks: false,
          restoreMocks: false,
          mockReset: false,
          include: [ 'test/**/*.test.ts', '**/*.spec.ts' ],
          exclude: [ '**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**' ],
          testTimeout: 5000,
          hookTimeout: 10000,
          isolate: true,
          watchExclude: [ '**/node_modules/**', '**/dist/**' ],
          forceRerunTriggers: [],
          update: false,
          reporters: [ 'default' ],
          silent: false,
          ui: false,
          uiBase: '/__vitest__/',
          open: true,
          css: { include: [ {} ] },
          coverage: {
            enabled: false,
            clean: true,
            cleanOnRerun: false,
            reportsDirectory: 'C:/Projects/epay.us.application/cmt.vue/coverage',
            excludeNodeModules: true,
            exclude: [
              'coverage/**',
              'packages/*/test{,s}/**',
              '**/*.d.ts',
              'cypress/**',
              'test{,s}/**',
              'test{,-*}.{js,cjs,mjs,ts,tsx,jsx}',
              '**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}',
              '**/__tests__/**',
              '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc}.config.{js,cjs,mjs,ts}',
              '**/.{eslint,mocha,prettier}rc.{js,cjs,yml}'
            ],
            reporter: [ 'text', 'html' ],
            allowExternal: false,
            extension: [
              '.js',  '.cjs',
              '.mjs', '.ts',
              '.tsx', '.jsx',
              '.vue', '.svelte'
            ],
            tempDirectory: 'C:/Projects/epay.us.application/cmt.vue/coverage/tmp'
          },
          fakeTimers: { loopLimit: 10000, shouldClearNativeTimers: true, toFake: [ 'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval', 'setImmediate', 'clearImmediate', 'Date' ] },
          maxConcurrency: 5,
          deps: { inline: [ '@vue', '@vueuse', 'vue-demi', {}, {}, {}, {}, {}, '@nuxt/test-utils' ] },
          defines: { __VUE_I18N_LEGACY_API__: false, __VUE_I18N_FULL_INSTALL__: true, __VUE_I18N_PROD_DEVTOOLS__: false },
          root: 'C:/Projects/epay.us.application/cmt.vue',
          snapshotOptions: { snapshotFormat: {}, updateSnapshot: 'new' },
          setupFiles: [],
          package: {
            version: '0.15.2',
            urls: { hooks: 'file:///C:/Users/sblowes/AppData/Local/JetBrains/WebStorm2022.2/wallaby/wallaby/runners/node/hooks.mjs' },
            paths: {
              root: 'C:\\Projects\\epay.us.application\\cmt.vue\\node_modules\\.pnpm\\vitest@0.15.2_jsdom@20.0.0\\node_modules\\vitest',
              dist: 'C:\\Projects\\epay.us.application\\cmt.vue\\node_modules\\.pnpm\\vitest@0.15.2_jsdom@20.0.0\\node_modules\\vitest\\dist'
            }
          }
        }
      }
    },
    testFramework: { version: 'vitest@0.14.0', configurator: 'vitest@0.14.0', reporter: 'vitest@0.14.0', starter: 'vitest@0.14.0', autoDetected: true },
    preserveComments: false,
    extractComments: true,
    files: [
      { pattern: 'test/**/*.test.ts', ignore: true, trigger: true, load: true },
      { pattern: '**/*.spec.ts', ignore: true, trigger: true, load: true },
      { pattern: '**/node_modules/**', ignore: true, trigger: true, load: true },
      { pattern: '**/dist/**', ignore: true, trigger: true, load: true },
      { pattern: '**/cypress/**', ignore: true, trigger: true, load: true },
      { pattern: '**/.{idea,git,cache,output,temp}/**', ignore: true, trigger: true, load: true },
      { pattern: '**/*.*', ignore: false, trigger: true, load: true, order: 1 }
    ],
    tests: [
      { pattern: '**/node_modules/**', ignore: true, trigger: true, load: true, test: true },
      { pattern: '**/dist/**', ignore: true, trigger: true, load: true, test: true },
      { pattern: '**/cypress/**', ignore: true, trigger: true, load: true, test: true },
      { pattern: '**/.{idea,git,cache,output,temp}/**', ignore: true, trigger: true, load: true, test: true },
      { pattern: 'test/**/*.test.ts', ignore: false, trigger: true, load: true, test: true, order: 2 },
      { pattern: '**/*.spec.ts', ignore: false, trigger: true, load: true, test: true, order: 3 }
    ],
    workers: { initial: 1, regular: 1, recycle: false },
    filesWithNoCoverageCalculated: [],
    runAllTestsInAffectedTestFile: false,
    updateNoMoreThanOneSnapshotPerTestFileRun: false,
    compilers: {},
    logLimits: { inline: { depth: 5, elements: 5000 }, values: { default: { stringLength: 200 }, autoExpand: { elements: 5000, stringLength: 8192, depth: 10 } } },
    preprocessors: {},
    maxConsoleMessagesPerTest: 100,
    autoConsoleLog: true,
    delays: { run: 0, edit: 100, update: 0 },
    teardown: undefined,
    hints: {
      ignoreCoverage: '__REGEXP /ignore coverage|istanbul ignore/',
      ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
      commentAutoLog: '?',
      testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' }
    },
    automaticTestFileSelection: true,
    runSelectedTestsOnly: false,
    mapConsoleMessagesStackTrace: false,
    extensions: {},
    env: {
      type: 'node',
      params: { runner: '--experimental-loader=file:///C:/Users/sblowes/AppData/Local/JetBrains/WebStorm2022.2/wallaby/wallaby/runners/node/hooks.mjs' },
      runner: 'C:\\Users\\sblowes\\scoop\\persist\\nvm\\nodejs\\nodejs\\node.exe',
      viewportSize: { width: 800, height: 600 },
      options: { width: 800, height: 600 },
      bundle: true
    },
    reportUnhandledPromises: true,
    slowTestThreshold: 75,
    lowCoverageThreshold: 80,
    loose: undefined,
    symlinkNodeModules: undefined,
    configCode: 'auto.detect#102945646'
  },
  packageJSON: {
    dependencies: {
      '@aacassandra/vue3-progressbar': '^1.0.3',
      '@headlessui/vue': '^1.6.5',
      '@oen.web.vue/portal': '^1.0.0',
      '@oruga-ui/oruga-next': '^0.5.5',
      '@progress/kendo-data-query': '^1.6.0',
      '@progress/kendo-drawing': '^1.16.3',
      '@progress/kendo-licensing': '^1.2.2',
      '@progress/kendo-theme-default': '^5.5.0',
      '@progress/kendo-vue-animation': '^3.4.0',
      '@progress/kendo-vue-buttons': '^3.4.0',
      '@progress/kendo-vue-charts': '^3.3.5',
      '@progress/kendo-vue-data-tools': '^3.4.0',
      '@progress/kendo-vue-dateinputs': '^3.4.0',
      '@progress/kendo-vue-dropdowns': '^3.4.0',
      '@progress/kendo-vue-excel-export': '^3.4.0',
      '@progress/kendo-vue-grid': '^3.4.0',
      '@progress/kendo-vue-indicators': '^3.4.0',
      '@progress/kendo-vue-inputs': '^3.4.0',
      '@progress/kendo-vue-intl': '^3.4.0',
      '@progress/kendo-vue-popup': '^3.4.0',
      '@storybook/mdx2-csf': '^0.0.3',
      '@vue-composable/axios': '1.0.0-beta.24',
      '@vueuse/core': '^8.7.5',
      '@vueuse/head': '^0.7.6',
      '@vueuse/integrations': '^8.7.5',
      axios: '^0.27.2',
      dayjs: '^1.11.3',
      hammerjs: '^2.0.8',
      'https-proxy-agent': '^5.0.1',
      'lodash-es': '^4.17.21',
      nprogress: '^0.2.0',
      'pac-proxy-agent': '^5.0.0',
      pinia: '^2.0.14',
      vue: '^3.2.37',
      'vue-demi': '^0.13.1',
      'vue-i18n': '^9.1.10',
      'vue-router': '^4.0.16',
      'vue3-cookies': '^1.0.6'
    },
    devDependencies: {
      '@babel/core': '^7.18.5',
      '@etchteam/storybook-addon-status': '^4.2.1',
      '@iconify-json/far': '^1.0.0',
      '@intlify/vite-plugin-vue-i18n': '^3.4.0',
      '@meforma/vue-toaster': '^1.3.0',
      '@oen.web.vue/eslint-config': '^1.1.0',
      '@oen.web.vue/prettier-config': '^1.1.0',
      '@storybook/addon-a11y': '^6.5.9',
      '@storybook/addon-actions': '^6.5.9',
      '@storybook/addon-essentials': '^6.5.9',
      '@storybook/addon-links': '^6.5.9',
      '@storybook/addon-notes': '^5.3.21',
      '@storybook/addon-postcss': '^2.0.0',
      '@storybook/addons': '^6.5.9',
      '@storybook/builder-webpack5': '^6.5.9',
      '@storybook/csf-tools': '^6.5.9',
      '@storybook/manager-webpack5': '^6.5.9',
      '@storybook/theming': '^6.5.9',
      '@storybook/vue3': '^6.5.9',
      '@types/lodash-es': '^4.17.6',
      '@types/nprogress': '^0.2.0',
      '@vitejs/plugin-vue': '^2.3.3',
      '@vue/test-utils': '^2.0.0',
      autoprefixer: '^10.4.7',
      'babel-loader': '^8.2.5',
      critters: '^0.0.16',
      'cross-env': '^7.0.3',
      dotenv: '^16.0.1',
      eslint: '^8.18.0',
      'http-proxy-middleware': '^2.0.6',
      'https-localhost': '^4.7.1',
      jsdom: '^20.0.0',
      pnpm: '^7.3.0',
      postcss: '^8.4.14',
      tailwindcss: '^3.1.4',
      typescript: '^4.7.4',
      'unplugin-auto-import': '^0.9.0',
      'unplugin-icons': '^0.14.5',
      'unplugin-vue-components': '^0.19.6',
      vite: '^2.9.12',
      'vite-plugin-inspect': '^0.5.0',
      'vite-plugin-pages': '^0.24.2',
      'vite-plugin-pwa': '^0.12.0',
      'vite-plugin-vue-layouts': '^0.6.0',
      vitest: '^0.15.2',
      'vue-loader': '^17.0.0',
      'vue-tsc': '^0.38.1',
      webpack: '5'
    }
  },
  fs: { numberOfFiles: 380 },
  debug: []
}

[smcenlly]

This has been fixed. Wallaby patches some of the filenames at runtime (adding ?wallaby=${timestamp}) as a part of its runtime / transformation cachebreaker. In the case of unplugin-auto-import, it could not handle filenames ending with ?=wallaby suffix and would never add the auto-imports.

This has been fixed in Wallaby core v1.0.1291.