Testing with Vitest

[domosedov]

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

[jrnxf]

Yep I'm seeing the exact same thing. My configuration is as follows:

/// <reference types="vitest" />
/// <reference types="vite/client" />

import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";

export default {
  plugins: [react(), vanillaExtractPlugin()],
  test: {
    globals: true,
    environment: "happy-dom",
    setupFiles: ["./setup-test-env.ts"],
    include: ["./src/**/*.{test,spec}.tsx"],
    watchIgnore: [".*\\/node_modules\\/.*", ".*\\/build\\/.*"],
  },
};

[tyrkinn]

Same problem. Also tried to add babel plugin

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

export default defineConfig({
  plugins: [
    vanillaExtractPlugin(),
    react({
      babel: {
        plugins: ["@vanilla-extract/babel-plugin"],
      },
    }),
  ],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "setupTests.ts",
  },
});

[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

[domosedov]

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

Thank you 👍

[frankwallis]

It looks to be related to this issue: vitest-dev/vitest#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)

[gkiely]

@markdalgleish Might be worth adding @domosedov solution to the docs? It does print this error message by default with vitest.

[AndrewLeedham]

This has been properly fixed with #833

[swernerx]

This has been properly fixed with #833

That's great. It's not yet in any release, right? Because when removing the code, I still see the old behavior.

[AndrewLeedham]

@swernerx it was released in @vanilla-extract/[email protected], working for me.

[swernerx]

Interesting, I am on 1.9.2, and it is definitely not working without the fallbackCJS hack.