需要帮助对 shadcn/ui 中的选择进行单元测试

我有一个 React 组件，我在其中使用了 shadcn/ui，具体而言，在本例中使用了 Select：

<div className='flex-1gt
<div className='flex-1'>；
                    <FormField
                      control={form.control}
                      name='clientType
                      render={({ 字段 }) => (
                        <FormItem>；
                          <FormLabel>；
                            客户类型 <span className='text-red-500 text-xs'>*</span>；
                          </FormLabel>；
                          <Select onValueChange={field.onChange} value={field.value}>；
                            <FormControl>；
                              <SelectTrigger className='w-full px-3 py-2 border rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500'>；
                                <SelectValue placeholder='选择客户类型' />；
                              </SelectTrigger>；
                            </FormControl>；
                            <SelectContent>；
                              <SelectItem value='直接'>直接</SelectItem>；
                              <SelectItem value='VMS'>VMS</SelectItem>；
                              <SelectItem value='Lm'>Lm</SelectItem>；
                            </SelectContent>；
                          </Select>；
                          </FormMessage />；
                        </FormItem>；
                      )}
                    />；
                  /div>；
                 
 more
 
我正在编写单元测试。
我正在编写单元测试（Jest、React 测试库），但我无法从测试中更改此选择的值。我尝试以组合框和按钮的形式获取引用，并尝试了 userEvent 和 fireEvent。似乎没有任何效果。
我还使用了 react-hook-forms，仅供参考。
是否有人做到了这一点，能否向我展示一下您所使用的技术？
Thanks、
詹姆斯

当然，以下是测试 Select 组件、使用 React Testing Library 模拟选择更改并在单元测试中使用 Jest 和 React Hook Form 验证其行为的一些方法：

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { useForm } from 'react-hook-form';
import { FormField, FormItem, FormLabel, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, FormControl  } from "@shadcn/ui"

// 包装你的组件以模拟 react-hook-form 上下文
const TestComponent = () => {
  const { control } = useForm();

  return (
    <div className='flex-1'>
      <FormField
        control={control}
        name='clientType'
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              客户类型 <span className='text-red-500 text-xs'>*</span>
            </FormLabel>
            <Select onValueChange={field.onChange} value={field.value}>
              <FormControl>
                <SelectTrigger className='w-full px-3 py-2 border rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500'>
                  <SelectValue placeholder='选择客户类型' />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectItem value='直接'>直接</SelectItem>
                <SelectItem value='VMS'>VMS</SelectItem>
                <SelectItem value='Lm'>Lm</SelectItem>
              </SelectContent>
            </Select>
          </FormItem>
        )}
      />
    </div>
  );
};

describe('Select Component', () => {
  test('应该更改值并提交表单', async () => {
    render(<TestComponent />);

    // 使用其角色查找选择触发器
    const selectTrigger = screen.getByRole('combobox'); 

    // 点击触发器打开选项
    fireEvent.click(selectTrigger);

    // 查找特定选项并点击它
    const optionVMS = screen.getByText('VMS');
    fireEvent.click(optionVMS);

    // 检查是否选择了正确的值
    expect(selectTrigger).toHaveValue('VMS'); 
  });
});

说明：

1. 渲染和包装： 我们将 Select 组件包装在一个测试组件中，以提供 useForm 上下文，就像它在你的真实应用程序中一样。
2. 查找元素： 我们使用 screen.getByRole 查找选择触发器，这对于选择等交互元素来说是一种可靠的方法。
3. 用户交互： 我们使用 fireEvent 模拟用户交互，例如单击触发器以打开选项，然后单击所需的值。
4. 断言： 最后，我们断言选择的值已根据我们的交互进行更新。

调试提示：

• 如果你在查找元素时遇到问题，请尝试使用 screen.debug() 打印渲染的 DOM。
• 确保你的组件正在渲染，并且你正在选择正确的元素。
• 记住，Shadcn UI 的样式可能会影响你选择元素的方式。检查他们的文档或使用浏览器开发人员工具来识别正确的选择器。

这应该可以帮助你有效地测试你的 Select 组件。如果你有任何其他问题，请告诉我！