How to run tests using vitest for components that reside in a different directory?

[fedemp]

I have a minimal project where I have three files.

// src/App.tsx
import { container } from './style.css.ts';
function App() {
  return (<div class={`${container}`}/>)
}

// src/style.css.ts
import { style } from '@vanilla-extract/css';

export const container = style({
  backgroundColor: "#ff00ff"
});

and then a test in the separate test/ directory using vite.

// test/App.test.tsx
import { expect, test } from 'vitest'
import { render } from 'vitest-browser-react'
import App from '../src/App.tsx'

test('renders name', async () => {
  const { getByText } = await render(<App />)
  await expect.element(getByText('Click on the Vite')).toBeInTheDocument()
})

The problem is that, much like many other people, I encountered this error

 FAIL   chromium  test/App.test.tsx [ test/App.test.tsx ]
Error: Failed to import test file /Users/federico.panico/vite-project/test/App.test.tsx
Caused by: Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started

My vitest.config.ts is fairly normal.

import { defineConfig } from 'vitest/config'
import { playwright } from '@vitest/browser-playwright'
import react from '@vitejs/plugin-react'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
  test: {
    browser: {
      enabled: true,
      provider: playwright(),
      // https://vitest.dev/config/browser/playwright
      instances: [
        { browser: 'chromium' },
      ],
    },
  },
})

BUT one thing I noticed is that if move the test from test/App.test.tsx to src/App.test.tsx, the test actually runs and passes. Is this an expected behaviour?