Proper configuration when using Vite 5 + Vitest 1.x

[thedanchez]

Full disclosure, I don't know if this issue belongs here or if it belongs in Vite/Vitest. Please let me know if it should move to one of those other places.

Does anybody have an example vite.config.ts that configures Vitest 1.x properly while using Vite 5? I keep getting the following error which I believe is affecting my tests that are now breaking for a simple Todo app:

stderr | file:/.../node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/dev.js:1919:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

My current vite.config.ts is the following:

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

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  resolve: {
    conditions: ['development', 'browser'],
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['node_modules/@testing-library/jest-dom/vitest.js'],
    // otherwise, solid would be loaded twice:
    testTransformMode: {
      web: ["/\.[jt]sx?$/"],
    },
    deps: {
      optimizer: {
        web: { enabled: true }, // to replace deps: { registerNodeLoader: true },
      }
    },
    isolate: false,
    pool: "threads",
    poolOptions: {
      threads: {
        maxThreads: 2,
        minThreads: 1,
      }
    },
  },
});

My package.json is the following:

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest"
  },
  "license": "MIT",
  "devDependencies": {
    "@solidjs/testing-library": "^0.8.5",
    "@testing-library/jest-dom": "^6.1.5",
    "@types/jsdom": "^21.1.6",
    "@types/testing-library__jest-dom": "^6.0.0",
    "jsdom": "^23.0.1",
    "solid-devtools": "^0.29.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10",
    "vite-plugin-solid": "^2.8.0",
    "vitest": "^1.1.0"
  },
  "dependencies": {
    "solid-js": "^1.8.7"
  }
}

[floratmin]

I made it work with the following dependencies (vite-plugin-solid v.2.8.1 breaks watch mode):

"@solidjs/testing-library": "^0.8.5",
"@testing-library/jest-dom": "^6.2.0",
"vite": "^5.0.11",
"vite-plugin-solid": "=2.8.0",
"vitest": "^1.2.1"

And these settings: File vistest.config.ts:

import '@testing-library/jest-dom/vitest';

File vite.config.ts:

/// <reference types='vitest' />
import solid from 'vite-plugin-solid';

export default defineConfig({
...
  plugins: [solid()],
  test: {
    globals: true,
    cache: {
      dir: '../../node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],

    setupFiles: [
      './vitest.config.ts'
    ],
    testTransformMode: { web: ["/\.[jt]sx?$/"] },
  },
...
};

File src/vite-env.d.ts:

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

[thedanchez]

Thanks for sharing that @floratmin! Unfortunately it did not work for me 😭 -- However, I managed to kick the tires a bit and this is what I ended doing recently that got things working:

// vite.config.ts

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

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./setupTests.ts'],
    testTransformMode: { web: ["/\.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],  // this was what did the trick!
      }
    }
  },
  build: {
    target: 'esnext',
  },
  resolve: {
    conditions: ['development', 'browser'],
  },
});

[atk]

I'm currently fixing the vite-plugin so you should be able to get by without extra configuration in the upcoming version (except for globals, if you use them).

[Lucianod28]

I've been trying to get past vitest 0.33 for 5 months but get the "multiple instances of Solid" error on 0.34 through 1.2. I've tried exactly replicating these configs along with every other suggestion on the internet but still get this error. If anyone has any ideas please let me know.

This is my package.json:

{  
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src tests --ext .ts,.tsx",
    "prettier": "npx prettier src tests --check",
    "format": "npm run prettier:fix && npm run lint:fix"
  },
  "devDependencies": {
    "@solidjs/testing-library": "^0.8.5",
    "@testing-library/jest-dom": "^6.2.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/editorjs__header": "^2.6.3",
    "@types/google.maps": "^3.54.10",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-solid": "^0.13.1",
    "eslint-plugin-tsdoc": "^0.2.17",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.11",
    "vite-plugin-solid": "^2.9.0",
    "vitest": "1.2.1"
  },
  "dependencies": {
    "@anshulsanghi/googlemaps-vitest-mocks": "^1.0.1",
    "@googlemaps/js-api-loader": "^1.16.2",
    "@googlemaps/markerclusterer": "^2.5.2",
    "@solid-primitives/script-loader": "^2.1.0",
    "@solidjs/router": "^0.10.9",
    "@toast-ui/calendar": "^2.1.3",
    "@vitest/coverage-v8": "1.2.1",
    "bootstrap": "^5.3.2",
    "dayjs": "^1.11.10",
    "flatpickr": "^4.6.13",
    "js-cookie": "^3.0.5",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.44",
    "npm": "^10.3.0",
    "openapi-fetch": "^0.8.2",
    "openapi-typescript": "^7.0.0-next.5",
    "solid-bootstrap": "^1.0.19",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.8.11",
    "solid-styled-components": "^0.28.5",
    "solid-transition-group": "^0.2.3"
  }
}

and first few lines of a typical vitest output, there's dozens of these warnings and most of the tests fail as a result:

 DEV  v1.2.1 /workspace/frontend

stderr | Object.<anonymous> (/workspace/frontend/node_modules/solid-js/dist/dev.cjs:1749:67)
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | Object.<anonymous> (/workspace/frontend/node_modules/solid-js/dist/dev.cjs:1749:67)
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | Object.<anonymous> (/workspace/frontend/node_modules/solid-js/dist/dev.cjs:1749:67)
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

[atk]

This issue is with the vite plugin, not with testing library.

Anyways, can you show me your vite(st) configuration?

[Lucianod28]

My current configuration is:

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

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    host: true,
    port: 3000,
    // necessary for loading node_modules in dev container
    fs: { allow: ["../../node_modules", "."] },
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: "./setupVitest.ts",
    coverage: {
      include: ["src/"],
      all: true,
      lines: 81.4,
      functions: 81.4,
      branches: 89,
      statements: 81.4,
    },
  },
  resolve: {
    conditions: ["development", "browser"],
  },
});

I've also tried the configs listed here, as well as the options listed here and here. Also my setupVitest.ts is

import "@testing-library/jest-dom/vitest";

import { vi } from "vitest";

process.on("unhandledRejection", (reason) => {
  throw reason;
});

const IntersectionObserverMock = vi.fn(() => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}));

vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);

and I've also tried with just the first line of setupVitest.ts

[atk]

With the newest plugin, you no longer need to manually load jest-dom. Also, transformMode is deprecated.

[Lucianod28]

I created a minimal reproduction: https://stackblitz.com/edit/vitest-dev-vitest-xs9lkq?file=vite.config.ts. It seems when I remove the Transition, the "multiple instances" warning goes away, so it may be related to solid-transition-group. However, normally I have dozens of the "multiple instances" so it may not be the only cause in my real codebase. Is there a config for my minimal example that removes that warning?

[atk]

Can you try to add solid-transition-group to test.server.deps.inline?

[Lucianod28]

Updated, that didn't work.

[atk]

Thanks, I'll have a closer look this weekend.

[Lucianod28]

@atk did you get a chance to look into this?