Add support for vitest testing framework

[ldover]

Clear and concise description of the problem

This tool abstracts Electron and Vite configuration beautifully; if it could do the same for a testing framework that would be dream, saving devs some manual work.

Suggested solution

At project creation time add the option to add a testing framework, maybe vitest (https://vitest.dev/).

Alternative

No response

Additional context

I've managed to set up vitest, but with my limited coverage of electron-vite, it was imperfect integration. Struggled with nested renderer folder and ended up adding another index.html file in the project root in order to make all the paths / modules resolve correctly.

Additionally had to add type: module in package.json for vite to work.

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

Testing with vitest is awesome. But vitest only supports Vite's configuration. This is where the difficulty lies. I'm also trying to optimize this so that developers can test more easily. Maybe the scaffolding will join the unit testing framework after solving this problem.

You can add a Vite configuration file in root, use the same configuration as renderer(in electron.vite.config.*), and specify the entry point.

/// <reference types="vitest" />
import { defineConfig } from "vite";
import { resolve } from 'path';

export default defineConfig({
  test: {
    // ...
  },
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/renderer/index.html')
      }
    }
  }
});

This is a temporary solution, which does not meet the original design intention of electron-vite.

In addition, Electron not supports type: module

[nanxfu]

Testing with is awesome. But only supports Vite's configuration. This is where the difficulty lies. I'm also trying to optimize this so that developers can test more easily. Maybe the scaffolding will join the unit testing framework after solving this problem.vitest``vitest

You can add a Vite configuration file in root, use the same configuration as renderer(in ), and specify the entry point.electron.vite.config.*

/// <reference types="vitest" />
import { defineConfig } from "vite";
import { resolve } from 'path';

export default defineConfig({
  test: {
    // ...
  },
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/renderer/index.html')
      }
    }
  }
});

This is a temporary solution, which does not meet the original design intention of .electron-vite

In addition, Electron not supports type: module

Sorry to borther you. But I just don't understand how to specify the entry point.electron.vite.config.*. Won't you set the input.index:resolve(__dirname, 'src/renderer/index.html') in Vite configuration file in the root? where is the place to specify the entry point?

[Y2zz]

Support for vitest is still very important

[GuillaumeQuenneville]

electron/electron#37535

There's a PR open to support esm modules that seems like it will probably be merged.

If I understand all of this correctly, if electron vite gets updated to point at whatever version includes this change, we can get rid of the commonjs transpiling steps and we'll get vitest support for free?

[annymosse]

You can add a Vite configuration file in root, use the same configuration as renderer(in electron.vite.config.*), and specify the entry point.

/// <reference types="vitest" />
import { defineConfig } from "vite";
import { resolve } from 'path';

export default defineConfig({
  test: {
    // ...
  },
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/renderer/index.html')
      }
    }
  }
});

this doesn't make vite load the electron.vite.config file configs, it just load the entry point of the index.html file without the plugins loaded inside the electron.vite.config.{ts,js,*}, I can guess that we can load the plugins inside vite.config.ts and export these plugins to electron.vite.config file , am I missing something in here ? (I'm just started experimenting this lib for few times only ).

[paltry-pleuroma]

I made a serious attempt at porting a project from a CRA app but despite many permutations, I was not able to get testing set up. It's hard to understand how this project could be useful in production without robust testing support and I wonder if this is in violation of semver given the lack of prerelease in version. I looked at using vite-jest but it doesn't support mocking modules.

I tried using both the renderer property of the return value of electron-vite's defineConfig AND the renderer value passed to the defineConfig in both a vite.config.js and a vitest.config.js file while also experimenting with the test property in such a way. I also experimented with using the mergeConfig.

[SiriffoS]

I am also trying to migrate a project to electron-vite. Whats a good test framework that works well with electron-vite?

[SvetBorislavov]

Path aliases do not work with vitest

[gxy5202]

I have the same problem... Do we have some new solutions?

[Repugraf]

Any help required with this?

[joseincandenza]

I don't know if vitest or another solution, but basically the front page of the project doesn't say anything about testing (maybe it's hidden somewhere, but it should be in a prominent place). I believe documentation is maybe faster to produce than an automatic integration and it would help a lot. Somebody knows about some repo with an extensive test example with electron-vite?

[hyusetiawan]

are there alternative solutions to support any testing framework? Would love some guidance

[mgray88]

This is how I solved the problem, since Vitest by default uses the vite.config.ts configuration:

// electron.vite.config.ts
import { defineConfig } from 'electron-vite'
import mainConfig from './packages/main/vite.config'
import preloadConfig from './packages/preload/vite.config'
import rendererConfig from './packages/renderer/vite.config'

export default defineConfig({
  main: mainConfig,
  preload: preloadConfig,
  renderer: rendererConfig,
})

[Dexus]

This is how I solved the problem, since Vitest by default uses the vite.config.ts configuration:

// electron.vite.config.ts
import { defineConfig } from 'electron-vite'
import mainConfig from './packages/main/vite.config'
import preloadConfig from './packages/preload/vite.config'
import rendererConfig from './packages/renderer/vite.config'

export default defineConfig({
  main: mainConfig,
  preload: preloadConfig,
  renderer: rendererConfig,
})

@mgray88 do you have an example repo? Or can descripe it a bit more, how you did it?

[Repugraf]

It's kind of a hack but I've got it working like this:

electron.vite.config.ts

import { resolve } from "path";
import { UserConfig, defineConfig, } from "electron-vite";

export const config = {
  main: {
      /* */
  },
  preload: {
     /* */
  },
  renderer: {
    /* */
} satisfies UserConfig;

export default defineConfig(config);

vitest.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vite";
import { resolve } from "path";
import { config } from "./electron.vite.config";

export default defineConfig({
  test: {
    setupFiles: [resolve(__dirname, "vitest.global-setup.ts")],
    environment: "jsdom",
  },
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, "src/renderer/index.html"),
      },
    },
  },
  ...config.renderer,
});

That being said - all tests are running in renderer env.

[osama-mhmd]

Hello there!
If anyone is still encountering issues with testing using vitest, here’s a detailed approach to set it up:

1. Install Vitest:

pnpm add -D vitest

2. Create the Vitest config:

Run touch vitest.config.ts and add the following code:

import { defineConfig } from 'vitest/config';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@main': path.resolve(__dirname, './src/main'),
      '@preload': path.resolve(__dirname, './src/preload'),
      '@renderer': path.resolve(__dirname, './src/renderer/src')
    }
  },
  test: {
    globals: true // With globals enabled, you don't need to import describe, it, vi, etc.
  }
});

3. Set up TypeScript config for tests:

Run mkdir tests && touch tests/tsconfig.json and add the following:

{
  "include": ["**/*.*", "../src/renderer/src/**/*", "../src/main/**/*"],
  "compilerOptions": {
    "baseUrl": "..",
    "paths": {
      "@renderer/*": ["src/renderer/src/*"],
      "@main/*": ["src/main/*"]
    },
    "types": ["vitest/globals"]
  }
}

Note: This is a minimal tsconfig.json setup for testing. Feel free to extend it based on your project's needs.

4. Run pnpm vitest, and add it to package.json