如何在NextJS中用Jest测试Chakra UI v3的Select组件？

针对你在NextJS项目中使用Chakra UI v3 Select组件（含Select.HiddenSelect）时遇到的测试问题，以下是具体的解决方案：

1. 修复ResizeObserver未定义与scrollTo错误 #

Jest的jsdom测试环境不包含浏览器原生的ResizeObserver，部分Chakra组件内部会调用元素的scrollTo方法，所以需要提前模拟这些API：

• 在测试文件顶部或全局测试配置文件（如setupTests.js）中添加ResizeObserver模拟：

global.ResizeObserver = class ResizeObserver {
  constructor(callback) { this.callback = callback; }
  observe() {}
  unobserve() {}
  disconnect() {}
};

• 全局模拟元素的scrollTo方法：

// 同样放在setupTests.js或测试文件顶部
Element.prototype.scrollTo = jest.fn();

2. 正确模拟用户交互选择选项 #

Chakra的Select是自定义组件（渲染为按钮+弹出层），并非原生<select>，因此不能用userEvent.selectOptions。需要按照真实用户操作流程模拟：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CustomSelect from './你的Select组件路径';

test('测试Select组件选择选项', async () => {
  const user = userEvent.setup();
  const mockOnChange = jest.fn();

  // 渲染你的自定义Select组件
  render(<CustomSelect onChange={mockOnChange} />);

  // 1. 点击Select触发按钮，打开下拉菜单
  const selectTrigger = screen.getByRole('button'); // 或用data-testid定位：screen.getByTestId('select-trigger')
  await user.click(selectTrigger);

  // 2. 找到目标选项并点击（这里以文本为"选项2"为例）
  const targetOption = await screen.findByRole('option', { name: /选项2/i });
  await user.click(targetOption);

  // 3. 验证选择结果：检查回调触发或组件状态
  expect(mockOnChange).toHaveBeenCalledWith(expect.any(Object), 'option2'); // 假设选项value为option2
  // 或验证触发按钮的文本更新
  expect(selectTrigger).toHaveTextContent('选项2');
});

3. 针对Select.HiddenSelect的验证 #

如果你的组件使用了Select.HiddenSelect（用于表单提交的隐藏原生控件），可以直接验证它的value是否正确更新：

// 在完成选项点击后
const hiddenSelect = screen.getByRole('combobox', { hidden: true });
expect(hiddenSelect).toHaveValue('option2');

4. 常见排查技巧 #

• 若找不到选项元素：下拉菜单是动态渲染的，改用findByRole（异步等待）代替getByRole
• 若仍有scrollTo错误：可以针对性mock特定元素的scrollTo，比如给Popover内容元素添加mock：

  const popoverContent = screen.getByRole('listbox');
  popoverContent.scrollTo = jest.fn();
  

• 定位困难时：给组件元素添加data-testid属性，比如<Select data-testid="select-trigger">，测试时用screen.getByTestId精准定位

内容的提问来源于stack exchange，提问作者John Tang Boyland