Vue项目中如何用Vitest/Jest模拟Vaadin组件

针对你在Vue+JavaScript项目中使用Vaadin Web Component，在Vitest+Vue Testing Library测试时遇到的__mocks__文件无法关联、stubs方案不适用的问题，提供以下几种可行方案：

方案1：配置Vitest模块映射强制关联mock文件 #

Vitest默认模块解析逻辑可能无法自动识别Vaadin组件的__mocks__文件，直接在vitest.config.js中通过moduleNameMapper指定组件导入路径到你的mock文件：

// vitest.config.js
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    moduleNameMapper: {
      // 映射单个Vaadin组件到对应mock文件
      '@vaadin/combo-box': '<rootDir>/__mocks__/@vaadin/combo-box.js',
      // 按需添加其他Vaadin组件的映射规则
      '@vaadin/button': '<rootDir>/__mocks__/@vaadin/button.js'
    }
  }
});

对应的mock文件示例（以combo-box为例）：

// __mocks__/@vaadin/combo-box.js
import { h } from 'vue';

export default {
  name: 'vaadin-combo-box',
  render() {
    // 渲染可被测试断言的模拟元素
    return h('input', {
      type: 'text',
      'data-testid': 'mock-vaadin-combo-box'
    });
  }
};

方案2：全局注册Vaadin组件模拟 #

在测试前置文件（如tests/setup.js）中使用Vitest的vi.mock全局mock所有Vaadin组件，避免每个测试文件重复配置：

// tests/setup.js
import { vi } from 'vitest';
import { h } from 'vue';

// 全局mock combo-box组件
vi.mock('@vaadin/combo-box', () => ({
  default: {
    name: 'vaadin-combo-box',
    render() {
      return h('div', { 'data-testid': 'mock-combo-box' });
    }
  }
}));

// 同理mock其他Vaadin组件
vi.mock('@vaadin/button', () => ({
  default: {
    name: 'vaadin-button',
    render() {
      return h('button', { 'data-testid': 'mock-button' }, '模拟按钮');
    }
  }
}));

然后在vitest.config.js中指定该前置文件：

test: {
  setupFiles: ['./tests/setup.js'],
  // 其他测试配置...
}

方案3：自定义Vue插件统一注册模拟组件 #

创建一个Vue插件，批量注册所有Vaadin组件的模拟实现，测试时只需引入插件即可：

// tests/mocks/vaadin-mocks.js
import { h } from 'vue';

export const VaadinMockPlugin = {
  install(app) {
    // 注册combo-box模拟组件
    app.component('vaadin-combo-box', {
      render() {
        return h('input', { 'data-testid': 'mock-combo-box' });
      }
    });
    // 注册button模拟组件
    app.component('vaadin-button', {
      render() {
        return h('button', { 'data-testid': 'mock-button' });
      }
    });
    // 按需添加其他Vaadin组件
  }
};

在测试文件中使用该插件：

import { mount } from '@vue/test-utils';
import { VaadinMockPlugin } from '../mocks/vaadin-mocks';
import TargetComponent from '../src/TargetComponent.vue';

test('目标组件渲染正常', () => {
  const wrapper = mount(TargetComponent, {
    global: {
      plugins: [VaadinMockPlugin]
    }
  });
  
  // 示例断言：检查模拟组件是否存在
  expect(wrapper.get('[data-testid="mock-combo-box"]')).toBeTruthy();
});

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