@lx-frontend/taro-vitest-preset

面向 Taro + React + TypeScript 项目的可复用 Vitest 预设。

环境依赖

• 确保项目 node 版本 大于等于 node:22，当前比如在 node:20 低版本可能对 esm 支持不友好，会出现 vscode 插件中运行测试用例失败，而 pnpm test 则无影响。

提供能力

• createTaroVitestConfig()：一键生成推荐默认配置
• withTaroVitest()：与已有 Vitest 配置进行合并
• 内置 setup 模块：@lx-frontend/taro-vitest-preset/setup
• 内置 @tarojs/taro 与 @tarojs/components 的 mock
• 内置覆盖率配置（通过 --coverage 启用）

快速接入

1. 安装依赖：

pnpm add -D @lx-frontend/taro-vitest-preset vitest @vitest/coverage-v8 @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

1. 创建 vitest.config.ts：

import { createTaroVitestConfig } from '@lx-frontend/taro-vitest-preset'

export default createTaroVitestConfig()

1. 确保 tsconfig.json 包含：

{
  "compilerOptions": {
    "types": ["vitest/globals", "@testing-library/jest-dom/vitest"]
  }
}

脚本配置

在 package.json 中添加：

{
  "scripts": {
    "test": "vitest run",
    "test:coverage": "vitest run --coverage"
  }
}

与已有配置合并

import { defineConfig } from 'vitest/config'
import { withTaroVitest } from '@lx-frontend/taro-vitest-preset'

export default withTaroVitest(
  defineConfig({
    test: {
      include: ['src/**/*.{test,spec}.ts'],
    },
  })
)

更多详细文档请阅读

单元测试场景示例

相关资料

• https://testing-library.com/