如何测试点击 select 的下拉选项？

Question

我正在使用 @testing-library/react 为 React 16.4.0 和 react-scripts 4.0.1 编写测试，以测试 select 下拉菜单的功能。

我希望测试运行器单击 select 下拉菜单，然后单击其值为 regular 的子项。但是，我似乎无法在测试中为 select 捕获 options 的 DOM 元素：

// Toolbar.test.tsx
render(<Toolbar/>)

const difficultySelect = screen.getByLabelText('difficulty')

console.log(difficultySelect.children)
// => HTMLCollection {}

奇怪的是，如果我用下面的代码检查 DOM，我会 return 预期值（options 的数组）：

// in browser console
const toggler = document.querySelector('toolbar-toggler');
toggler.children
// => HTMLCollection(4) [option, option, option, option]

我做了一些研究，我的直觉是我应该使用 useRef 访问 select 工具栏 options。但是我一直在努力实现这一点。

实际组件代码如下：

// Toolbar.tsx
function Toggler({setting, options}: { setting: string, options: string[]}) {
  const handleChange = (option: string) => {
    // ... snip ... 
  }

  return (
    <div key={setting} className={`${setting}-select-container`}>
      <label htmlFor={setting}>{setting}</label>
      <select id={setting} data-testid='toolbar' key={setting} onChange={(event) => handleChange(event.target.value)}>
        {
          options.map((option: any, index: number) => (
            <option value={option} key={index}>{option}</option>
          ))
        }
      </select>
    </div>
  )
}

Answer 1

访问 <select /> 元素后，您可以在其上触发点击事件，然后获取您想要点击的所需选项。

// In your test case
render(<Toolbar options={['easy', 'regular', 'hard']} setting="difficulty" />)
const difficultySelect = screen.getByLabelText('difficulty')
fireEvent.click(difficultySelect)
const regularOption = screen.getByRole('option', { name: 'regular' })
fireEvent.click(regularOption)

理想情况下，您希望测试遵循与用户与 UI 元素交互时相同的步骤。

如何测试点击 select 的下拉选项？

How to test a click on a select's drop-down option?

javascript

drop-down-menu

typescript

reactjs

react-testing-library