前端 - 如何进行electron项目配置vitest呢？

Question

请问一下：
如果进行electron项目配置vitest呢？

我安装：

pnpm add -D vitest

然后测试文件中进行使用：
src/main/__test__/wm.test.ts

import { describe, it } from 'vitest'
import { wm } from '../wm'

describe('wm 窗口管理', () => {
  it('测试: wm是否存在', () => {
    console.log(wm)
  })

  it('测试: wm.getWindowStates()', () => {

  })
 })

但是报错：

 FAIL  src/main/__test__/wm.test.ts [ src/main/__test__/wm.test.ts ]
Error: Failed to load url @shared/constants (resolved id: @shared/constants) in /Users/john/Desktop/Test/electron-test/src/main/index.ts. Does the file exist?

这里的报错是wm.ts不能引用alias路径：@shared/constants，
我问GPT，是需要配置：
vitest.workspace.ts这些的，但是我实践并没有生效.

请问是否有大佬知道在electron中如何配置vitest进行单元测试呢？因为它并不是我们经常看到的react项目，而是有主进程渲染进程的。

Answer 1

路径别名问题
vitest.config.ts

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

export default defineConfig({
  test: {
    environment: 'jsdom', // 或者 'node'，取决于你的测试类型
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, 'src/shared'), // 根据你的项目结构调整路径
      },
    },
  },
  // 其他配置...
});

Answer 2

回答

在 Electron 项目中配置 Vitest 进行单元测试，特别是当你的项目使用路径别名（如 @shared/constants）时，确实需要一些额外的配置。以下是一个详细的步骤指南，帮助你正确配置 Vitest：

1. 安装必要的依赖：
   你已经安装了 vitest，确保你同时安装了相关的 Electron 测试依赖，例如 electron 和 vitest-electron（如果需要的话）。

   pnpm add -D electron vitest-electron

2. 配置 Vitest：
   创建一个 vitest.config.ts 文件来配置 Vitest。在这个配置文件中，你需要解决路径别名的问题。

   // vitest.config.ts
   import { defineConfig } from 'vitest/config'
   import path from 'path'
   
   export default defineConfig({
     test: {
       environment: 'jsdom', // 或者 'node'，取决于你的测试类型
       resolve: {
         alias: {
           '@shared': path.resolve(__dirname, 'src/shared'), // 根据你的项目结构调整路径
         },
       },
     },
     // 其他配置...
   })

3. 配置 Electron 主进程和渲染进程的测试：

   • 对于主进程测试，你可能需要使用 vitest-electron 或者手动启动 Electron 主进程。
   • 对于渲染进程测试，你可能需要在测试环境中模拟或启动一个 BrowserWindow。
4. 在测试文件中使用路径别名：
   确保你的测试文件能够正确解析路径别名。根据你上面的配置，@shared/constants 应该能够正确解析到 src/shared/constants。
5. 运行测试：
   使用 pnpm test 或 vitest 命令运行你的测试。如果一切配置正确，你的测试应该能够运行，并且不再报错关于路径解析的问题。

6. 调试和修正：
   如果仍然遇到问题，检查以下几点：

   • 确保路径别名配置正确无误。
   • 确保所有相关文件都存在且路径正确。
   • 检查是否有其他配置或代码问题影响到路径解析。

通过上述步骤，你应该能够在 Electron 项目中成功配置并运行 Vitest 进行单元测试。如果你的项目结构或需求有所不同，可能需要根据实际情况调整配置。