运行Vitest测试用例时遇SyntaxError: Unexpected token '||='问题求助

一、排查||=运算符来源 #

• 全局搜索项目所有文件（包括node_modules）：用VSCode全局搜索时勾选「包含排除的文件/文件夹」，或在终端执行grep -r "||=" ./node_modules/，定位使用该运算符的依赖包。
• 检查依赖版本：部分第三方库（如UI组件库、工具库）可能使用了ES2021的逻辑赋值语法，而测试环境未对其做转译。

二、调整Vitest配置解决语法兼容问题 #

在vite.config.ts的test配置中添加以下内容：

export default defineConfig({
  // 其他现有配置
  test: {
    // 你的原有配置
    type: {
      globals: true,
      environment: 'jsdom'
    },
    // 新增配置
    esbuild: {
      target: 'es2021' // 指定支持||=的ES版本
    },
    deps: {
      inline: ['vuetify', 'pinia'] // 强制转译Vuetify、Pinia这类依赖，避免语法兼容问题
    }
  }
})

如果项目使用Babel，确保@babel/preset-env的targets配置包含测试环境支持的ES版本，或直接开启useBuiltIns: 'usage'并引入core-js。

三、Vue3+Vuetify3+Pinia的Vitest测试参考示例 #

1. 基础依赖安装 #

npm install vitest @vue/test-utils jsdom @vitejs/plugin-vue vuetify pinia vite-plugin-vuetify

2. 核心配置文件vite.config.ts #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [vue(), vuetify({ autoImport: true })],
  test: {
    globals: true,
    environment: 'jsdom',
    deps: {
      inline: ['vuetify'] // Vuetify内部可能使用较新语法，需要强制转译
    },
    css: {
      modules: {
        classNameStrategy: 'non-scoped'
      }
    }
  }
})

3. 组件测试示例（结合Pinia） #

import { mount } from '@vue/test-utils'
import { createPinia } from 'pinia'
import UserProfile from './UserProfile.vue'

test('渲染用户信息并读取Pinia状态', () => {
  const pinia = createPinia()
  const wrapper = mount(UserProfile, {
    global: {
      plugins: [pinia]
    },
    props: {
      userId: 1
    }
  })

  expect(wrapper.find('.username').text()).toBe('test-user')
})

4. Vuetify组件测试示例 #

import { mount } from '@vue/test-utils'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import ActionButton from './ActionButton.vue'

const vuetify = createVuetify({ components, directives })

test('渲染Vuetify按钮并触发点击事件', async () => {
  const mockClick = vi.fn()
  const wrapper = mount(ActionButton, {
    global: {
      plugins: [vuetify]
    },
    props: {
      onClick: mockClick
    }
  })

  await wrapper.find('v-button').trigger('click')
  expect(mockClick).toHaveBeenCalled()
})

内容的提问来源于stack exchange，提问作者Nallamachu