Nuxt3 can't import component in tests

Question

I'm trying to run a component unit test on Nuxt 3 but I get an error telling me that the component cannot be found..

FAIL test/components/button.test.ts [ test/components/button.test.ts ] Error: Failed to resolve import "@/components/Texts/Button/ButtonText.vue" from "components\Button\Button.vue". Does the file exist?

button.spec.ts

import {test, expect} from 'vitest';
import {mount} from '@vue/test-utils';
import Button from "../../components/Button/Button.vue";

test('Button Component', async () => {
    const button = mount(Button, {
        props: {
            text: 'My Test Button'
        }
    });
    expect(button.text()).toEqual('My Test Button');
});

Button.vue

<template>
  <div class="Button">
    <slot name="left" />
    <ButtonText :text="text" />
    <slot name="right" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'Button',
  components: {ButtonText},
  props: {
    // Text to display in the button
    text: {
      type: String as () => string,
      default: 'Button',
      required: true,
    },
  }
}
</script>

any ideas ?

Answer 1

Assuming, that @/components/Texts/Button/ButtonText.vue actually exists, a solution to your problem might be adding aliases to your ./vitest.config.ts like that:

// vitest.config.ts

import { defineConfig } from 'vite'

import { aliases } from './aliases'

export default defineConfig({
    resolve: { aliases },
    // ... further settings
})

// aliases.ts

import { resolve } from 'path';

const r = (p: string) => resolve(__dirname, p);

export const alias: Record<string, string> = {
    '~~': r('.'),
    '~~/': r('./'),
    '@@': r('.'),
    '@@/': r('./'),
    // ... other aliases
};