如何使用 React 测试库测试流畅的 ui 下拉菜单？

Question

我是反应测试库的新手，所以这可能很容易，但我目前有一个从流畅的 UI 导入的下拉列表，当我尝试测试它时，当前收到“该元素没有值设置器”错误使用 React 测试库。这是我的渲染函数。

import { Dropdown, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { Stack } from 'office-ui-fabric-react/lib/Stack';


render() 
  {
    return (
      <div className="LandingPage">
        <h3>Here are some options</h3>
        <form onSubmit={this.handleSubmit}>
          <Stack>
            <Stack.Item align="center">
              <Dropdown
              placeholder="Select an option"
              label="Select an option"
              options={this.options}
              styles={this.dropdownStyles}
              onChange={this.handleChange}
              data-testid="myId"
            />
            </Stack.Item>
          </Stack>
        </form>
      </div>
    );
  }
}

这是失败的行：

  const dropdownOption: IDropdownOption = {
    key: "0",
    text: "dropdownOption"
  }

fireEvent.click(queryByTestId("myId"), { target: { value: 'B' }, option: dropdownOption })

The given element does not have a value setter

    > 44 |   fireEvent.click(queryByTestId("myId"), { target: { value: 'B' }, option: dropdownOption })
         |             ^

Answer 1

你可以参考这个答案： 如何使用react-testing-library测试react-select，不是使用流畅的UI，但非常相似。不要使用单击或更改，使用 keyDown + 单击

const DOWN_ARROW = { keyCode: 40 };
fireEvent.keyDown(screen.getByLabelText('myId'), DOWN_ARROW);
fireEvent.click(screen.getByText('...your text'));  

并且不要使用 data-testid，而是使用 aria-label。