时间戳

首页 > 解决方案 > 如何测试单击选择的下拉选项？

javascript - 如何测试单击选择的下拉选项？

问题描述

我正在使用@testing-library/reactfor React 16.4.0&编写一个测试react-scripts 4.0.1来测试select下拉菜单的功能。

选择下拉

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

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

const difficultySelect = screen.getByLabelText('difficulty')

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

奇怪的是，如果我使用以下代码检查 DOM，我确实返回了预期值（ 的数组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>
  )
}

标签： javascriptreactjstypescriptdrop-down-menureact-testing-library

解决方案

访问该<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 元素交互一样的步骤。

推荐阅读