使用Vitest+jsdom测试focus-trap-react组件时遇报错问题

问题背景 #

在Vitest的js-dom环境下测试包含focus-trap-react的组件时，会触发报错：

Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times

此前用Jest时，按照focus-trap官方文档的__mocks__文件夹方案可以解决，但切换到Vitest后该方案失效——核心原因是Vitest的mock机制与Jest存在差异，不会自动识别项目根目录的__mocks__文件夹。

可行解决方案 #

方案1：在单个测试文件中显式Mock #

直接在需要测试的文件顶部添加tabbable的mock代码，强制返回一个可聚焦节点：

vi.mock('tabbable', () => ({
  default: () => [document.createElement('button')],
  isTabbable: () => true,
}));

这种方式适合仅在特定测试中需要mock的场景，无需全局配置。

方案2：配置Vitest识别__mocks__文件夹 #

在项目的vite.config.ts中添加别名映射，让Vitest加载__mocks__下的tabbable文件：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  test: {
    environment: 'jsdom',
    // 其他测试配置
  },
  resolve: {
    alias: {
      'tabbable': path.resolve(__dirname, '__mocks__/tabbable.js'),
    },
  },
});

然后在项目根目录创建__mocks__/tabbable.js，写入mock逻辑：

module.exports = {
  default: () => [document.createElement('button')],
  isTabbable: () => true,
};

这样所有测试都会自动使用mock后的tabbable。

方案3：通过全局Setup文件统一Mock #

创建vitest.setup.ts文件，添加全局mock逻辑：

import { vi } from 'vitest';

vi.mock('tabbable', () => ({
  default: () => [document.createElement('button')],
  isTabbable: () => true,
}));

然后在vite.config.ts中指定该文件为测试前置文件：

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
    // 其他测试配置
  },
});

这种方式适合所有测试都需要mock tabbable的场景，一次配置全局生效。

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