如何使用Reaction测试库从选择列表中选择选项 [英] How to select an option from a select list with React Testing Library

问题描述

我有一个普通的选择列表。我需要测试当我选择一个选项时会调用handleChoice。如何使用Reaction测试库执行此操作？

  <select
    onChange={handleChoice}
    data-testid="select"
  >
    <option value="default">Make your choice</option>
    {attributes.map(item => {
      return (
        <option key={item.key} value={item.key}>
          {item.label}
        </option>
      );
    })}
  </select>

getByDisplayValue值为item.label不返回任何内容，可能是因为它在页面上不可见？

推荐答案

将data-testid添加到选项

  <option data-testid="select-option" key={item.key} value={item.key}>
      {item.label}
  </option>

然后，在测试调用fireEvent.change中，通过getAllByTestId获取所有选项，并选中选中的选项：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App from './App';

test('Simulates selection', () => {
  const { getByTestId, getAllByTestId } = render(<App />);
  //The value should be the key of the option
  fireEvent.change(getByTestId('select'), { target: { value: 2 } })
  let options = getAllByTestId('select-option')
  expect(options[0].selected).toBeFalsy();
  expect(options[1].selected).toBeTruthy();
  expect(options[2].selected).toBeFalsy();
  //...
})

对于您的问题，getByDisplayValue仅适用于显示的值

这篇关于如何使用Reaction测试库从选择列表中选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！