3

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

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 })
         |             ^
4

3 回答 3

1

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

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

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

于 2020-11-03T16:26:02.497 回答
0

问题是 Dropdown 组件的 FluentUI 实现。如果您检查生成的 HTML，您会发现<Dropdown>只是样式化<div>并且没有<option>元素作为子节点。

要检查当前在测试时呈现的内容，您可以将此行添加到您的测试中，它将显示“整个”HTML（如果它足够小，则将第二个参数增加一些零）。

screen.debug(undefined, 10000000);

为了能够看到这些<option>元素，您必须首先单击该<Dropdown>组件。单击后，将呈现span具有角色的新元素，您可以访问它们。option

要单击下拉列表，您可以使用fireEvent或userEventfrom react-testing-library。

要选择其中一个选项，您还必须单击它。在那里我发现由于某种原因userEvent不起作用，您必须使用fireEvent.

所以整个例子可能看起来像这样：

import { act, fireEvent, render, screen } from '@testing-library/react';

test('select value from FluentUI Dropdown', async () => {
    render(<YourComponentWithDropdown/>);

    // Get the dropdown HTML element
    const dropdown = await screen.findByRole('combobox');
    expect(dropdown).toBeDefined();

    // Click on the dropdown
    userEvent.click(dropdown);

    // Find the option you want to select
    const option = (await screen.findByRole('option', { name: 'Bannana bread' })) as HTMLButtonElement;
    expect(option).toBeDefined();

    // Click on the option
    fireEvent.click(option);

    // Test what should follow after selection
});
于 2021-12-02T15:17:39.923 回答
0

我发现您甚至不需要使用 fireEvent.keyDown，就像您查看 Fluent UI 下拉组件的开玩笑快照一样，所有下拉选项都是可直接访问的可选按钮。

这对我有用：

const option = screen.getAllByText("myDropdownOption")[0];
fireEvent.click(option);

我不知道在这里使用什么选择器，因为仅通过文本选择会返回多个元素，并且“按钮”选择器似乎也不起作用，所以我决定使用getAllByText()[0]抓取第一个元素并单击那个. 这不是一个非常漂亮的解决方案，我将它抽象为一个辅助函数，直到找到正确的选择器。

于 2021-08-11T01:44:13.247 回答