solidjs / solid-start

SolidStart, the Solid app framework
https://start.solidjs.com
MIT License
5.22k stars 373 forks source link

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

Open agmcleod opened 3 months ago

agmcleod commented 3 months ago

Duplicates

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"
  }
Brendonovich commented 3 months ago

@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 commented 3 months ago

@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?