[Bug?]: Path aliases fail to resolve with vitest

[agmcleod]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When I test a component that imports another component or file via the ~ alias, the import fails to resolve:

Error: Failed to resolve import "~/components/Counter" from "src/routes/index.tsx". Does the file exist?

Expected behavior 🤔

Ideally these imports should resolve since the dev server supports these paths.

This seems to be fixable by updating the vitest.config.ts file

import solid from 'vite-plugin-solid'
import { defineConfig } from 'vitest/config'
// new import to utilize for the alias
import path from 'path'

export default defineConfig({
  plugins: [solid()],
  resolve: {
    conditions: ['development', 'browser'],
    // define alias here
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
  },
})

Steps to reproduce 🕹

Steps:

1. Create a new solid repo: yarn create solid. Be sure to select the vitest template
2. Create a new file src/routes/index.test.tsx and put in the following contents:

import { describe, it, expect } from 'vitest'
import { render } from '@solidjs/testing-library'

import Home from '.'

describe('Home', () => {
  it('renders', async () => {
    const { findByText } = render(() => <Home />)
    expect(await findByText('Hello world')).toBeInTheDocument()
  })
})

Then try to run the tests

Context 🔦

No response

Your environment 🌎

MacOS Sonoma 14.3
Node: 22.3.0
Yarn: 1.22.0

  "devDependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.14.1",
    "@solidjs/start": "^1.0.6",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@vitest/ui": "^1.5.0",
    "jsdom": "^24.0.0",
    "solid-js": "^1.8.18",
    "typescript": "^5.4.5",
    "vinxi": "^0.4.1",
    "vite": "^5.2.8",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.0"
  }

[neehhaa06]

Hello!! @agmcleod :)

fix: #1600

To fix the ~ alias resolution issue in Vitest, update vitest.config.ts with:

import path from 'path';
export default defineConfig({ resolve: { alias: { '~': path.resolve(__dirname, './src') } } });

Install necessary packages with yarn add vitest vite-plugin-solid path --dev, then restart Vitest and verify your imports.

[Brendonovich]

@agmcleod This is kinda expected behaviour, since Start will fill in the ~ alias automatically through Vinxi, whereas Vitest isn't aware of Start's configurations. Perhaps there should be @solidjs/start/vitest that fills in stuff like this, but any custom aliases would need to be duplicated in app.config.ts or vitest.config.ts unless you use a custom Vite plugin.

[agmcleod]

@Brendonovich Yeah that's what im suggesting, where the start template of vitest doesn't seem to support the aliases that start itself provides. Was able to find out the change needed to make it work, but im wondering if that can be provided by the vitest template instead?