I am moving over to vitest from jest, due to jest not supporting the instanceof operator (grrr).

For the most part it has been a pretty smooth transition, but I’m having trouble figuring out how to avoid it loading multiple instances of react.

For context, I have a web project and a ui project – where the ui project contains re-usable react components and such. For local development, I use yarn link so that the web project will use my local version of the ui project rather than whatever is in the repo.

Unfortunately, this leads to the ui components using the react library from the ui project’s node_modules folder while the web project uses the react library found in its’ node_modules folder. This leads to fun errors like: TypeError: Cannot read properties of null (reading 'useContext')

Now, in webpack I resolve this by configuring resolve.alias and for jest I configured the moduleDirectories setting to force it to always use the web project’s copy of react. Unfortunately, I’ve tried both of these settings in vitest to no avail. Please advise!

Here’s my current configuration for vitest:

import { defineConfig } from 'vitest/config'
import path from 'path';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: [
      "src/test/setupTests.ts"
    ],
  },
  resolve: {
    alias: {
      "@ag-grid-community": path.resolve(__dirname, "node_modules/@ag-grid-community"),
      "@emotion": path.resolve(__dirname, "node_modules/@emotion"),
      "@mui": path.resolve(__dirname, "node_modules/@mui"),
      "ag-grid-community": path.resolve(__dirname, "node_modules/ag-grid-community"),
      "ag-grid-enterprise": path.resolve(__dirname, "node_modules/ag-grid-enterprise"),
      "ag-grid-react": path.resolve(__dirname, "node_modules/ag-grid-react"),
      "react": path.resolve(__dirname, "node_modules/react"),
      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
      "react-hook-form": path.resolve(__dirname, "node_modules/react-hook-form"),
      "react-redux": path.resolve(__dirname, "node_modules/react-redux"),
      "react-router": path.resolve(__dirname, "node_modules/react-router"),
      "react-router-dom": path.resolve(__dirname, "node_modules/react-router-dom"),
      "react-toastify": path.resolve(__dirname, "node_modules/react-toastify"),
      "styled-components": path.resolve(__dirname, "node_modules/styled-components")
    },
  }
});