Testing with Vitest

Hello, any help how test vanilla-extract with Vitest?

Demo: Stackblitz

i have an error with npm run test

 FAIL  src/components/button/button.test.tsx [ src/components/button/button.test.tsx ]
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/setup

[AndrewLeedham]

Hey All. I ran into this a few weeks ago, it was a pain to debug. The issue is with some code being run in ESM and some in CJS so the file scopes stuff is split across 2 separate modules and therefore cannot see each-others local variables. Long story short you need to include the following in your Vite config:

{
  // ...
  test {
    deps: {
      fallbackCJS: true,
    }
  }
}

https://vitest.dev/config/#deps

See fixed fork here: https://stackblitz.com/edit/vitejs-vite-1fmagr?file=vite.config.ts

[frankwallis]

It looks to be related to this issue: https://github.com/vitest-dev/vitest/issues/747

Similar to the comment in that thread one solution is to delete node_modules/@vanilla-extract/css/fileScope/package.json

which interferes with the module resolution defined at the top-level (fallbackCJS: true did not work for me)