Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vitest, Vitesse, auto importing #3020

Closed
blowsie opened this issue Jun 24, 2022 · 1 comment
Closed

Vitest, Vitesse, auto importing #3020

blowsie opened this issue Jun 24, 2022 · 1 comment

Comments

@blowsie
Copy link

blowsie commented Jun 24, 2022 •
edited
Loading

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: []
}
@blowsie blowsie mentioned this issue Jun 24, 2022
Closed
@smcenlly
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@blowsie @smcenlly