5

I am using some utils in Nuxt 3. The vue reactivity system (ref, computed, ...) is also imported directly. However, it is not the case for the tests.

Running the spec file importing a ./useBusinessValidation composable throws the error ReferenceError: ref is not defined

Source file ./useBusinessValidation:

import { MaybeRef } from "@vueuse/core"

export const useBusinessValidation = <T>(rule: (payload: T) => true | string, payload: MaybeRef<T>) => {
  const validation = computed(() => rule(unref(payload)))

  const isValid = computed(() => validation.value === true)
  const errorMessage = computed(() => isValid.value ? undefined : validation.value as string)

  return {
    isValid,
    errorMessage
  }
}

Spec file useBusinessValidation.spec.ts:

import { useBusinessValidation } from "./useBusinessValidation"

describe('useBusinessValidation', async () => {
  it('should be valid with payload respecting the rule', () => {
    const rule = (x: number) => x > 0 ? true : `invalid ${x} number. Expected ${x} to be greater than 0.`
    const { isValid, errorMessage } = useBusinessValidation(rule, 0)

    expect(isValid.value).toBe(true)
    expect(errorMessage.value).toBe(undefined)
  });
})

and the vitest.config.ts

{
  resolve: {
    alias: {
      '~': '.',
      '~~': './',
      '@@': '.',
      '@@/': './',
      'assets': './assets',
      'public': './public',
      'public/': './public/'
    }
  },
  test: {
    globals: true,
    setupFiles: './test/setupUnit.ts',
    environment: 'jsdom',
    deps: { inline: [/@nuxt\/test-utils-edge/] },
    exclude: [
      'test/**/**.spec.ts',
      '**/node_modules/**',
      '**/dist/**',
      '**/cypress/**',
      '**/.{idea,git,cache,output,temp}/**'
    ]
  }
}

I also tried with the @vitejs/plugin-vue as

plugins: [Vue()]

in the vitest config. It didn't work out.

Lyokolux
  • 1,227
  • 2
  • 10
  • 34

1 Answers1

7

To auto-import in vitest, install the unplugin-auto-import.

Then, in the vitest.config.ts add:

import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
...
  plugins: [
    AutoImport({
      imports: [
        'vue',
        // could add 'vue-router' or 'vitest', whatever else you need.
      ],
   }),
  ]
});
Andy
  • 102
  • 1
  • 5
  • 1
    Altough this does work in the case of the original question to import `ref` from vue, I couldn't find a way yet to import nuxt3 specific functions like `useFetch` or `usePublicRuntimeConfig` that way yet. – floriankapaun Feb 21 '23 at 12:07
  • 1
    @florian_ did you find a way yet to do this? – Adam Silva Mar 23 '23 at 14:48
  • 1
    I did @AdamSilva! I'm using [nuxt-vitest](https://github.com/danielroe/nuxt-vitest) now. But beware, that it's in active development and likely not ready for every use-case. – floriankapaun Mar 24 '23 at 09:34