Unable to resolve file in assets/public folder during testing

[gretchelin]

I'm using Nuxt3 + Layer, with nuxt-test-utils and testing-library/vue set up. When I run the test, it keeps failing with error below:

Failed to resolve import "/assets/defaults/user.png" from "ui/components/atoms/avatar/index.vue"

Other test that doesn't have assets referenced (be it in public dir or assets dir), runs correctly with the same test setup.

Any insight on what might be missing? I've read the docs and there doesn't seem any special mention regarding assets nor layers, so I'm not sure if I set things up correctly.

Additional Info:

My project dir is like this:

.
├── core                                # Core project (shared setup)
│   ├── components                      # Common components shared by domains
│   ├── composables                     # Common composables shared by domains     
│   ├── layouts                         # Common layout shared by domains     
│   ├── locales                         # Common i18n language store share by domains     
│   ├── plugins                         # Common plugins shared by domains     
│   ├── public                          # Public assets served at server root
│   ├── stores                          # Common store shared by domains
│   ├── utils                           # Common utility functions shared by domains
│   └── nuxt.config.ts                  # (Required) Core-specific nuxt config      
├── ui                                  # UI library project
│   ├── components                      # Common components shared by domains
│   │   ├── atoms                       # Collection of components (Based on Atomic design) 
│   │   │   ├── <component_name>        # Single Component
│   │   │   │   ├── index.stories.ts    # Storybook file
│   │   │   │   ├── index.spec.ts       # Test file
│   │   │   │   ├── index.vue           # Vue SFC
│   │   │   │   └── style.css           # CSS file
│   │   │   .                            
│   │   │   .                           
│   │   │   └── <component_name>        # Single Component
│   └── nuxt.config.ts                  # (Required) UI-specific nuxt config      
├── layers                              # Domain-based project holder
│   └── <domain_name>                   # Domain-bsaed project (feature-based)
│        .
│       └── nuxt.config.ts              # (Required) Domain-specific nuxt config      
├── public                              # Public assets served at server root
├── nuxt.config.ts                      # Root nuxt config      
├── vitest.config.ts                      # Root nuxt config      
└── README.md

I have a component located in ui/components/atoms/avatar/index.vue which vue template contains this:

<template>
<div>
<img src="~/assets/defaults/user.png" />
</div>
</template>

And a simple test file:

// ui/components/atoms/avatar/index.spec.ts

// @vitest-environment nuxt
import { renderSuspended } from '@nuxt/test-utils/runtime';
import { screen } from '@testing-library/vue';
import { describe, expect, it } from 'vitest';
import TestedComponent from './index.vue';

describe('[UI] Avatar', () => {
  let renderComp;

  beforeEach(() => {
    renderComp = (options: Record<string, any>) => {
      return renderSuspended(TestedComponent, {
        ...(options || {}),
        global: {
          stubs: {
            vTooltip: true,
            tooltip: true,
            Icon: {
              template: '<span />',
            },
            ...(options?.global?.stubs || {}),
          },
          ...(options?.global || {}),
        },
        props: {
          'data-teid': 'comp-entry-id',
          ...(options?.props || {}),
        },
      });
    };
  });

  it('should render default', async () => {
    await renderComp({
      props: {
        'data-teid': 'comp-entry-id',
      },
    });

    const container = screen.getByTestId('comp-entry-id');
    expect(container).toBeInTheDocument();
  });
});

My vitest config at root of project:

// vitest.config.ts

import { defineVitestConfig } from '@nuxt/test-utils/config';

export default defineVitestConfig({
  test: {
    environment: 'happy-dom',

    exclude: [
      '**/.husky/**',
      '**/node_modules/**',
      '**/public/**',
    ],

    globals: true,

    setupFiles: [
      './core/test/setup.ts',
    ],

    coverage: {
      reporter: process.env.GITHUB_ACTIONS ? ['text-summary', 'lcov', 'github-actions'] : ['text-summary', 'lcov'],
      reportsDirectory: './test/coverage',
    },
  },
});