如何使用反应测试库测试材料 ui 自动完成答案

【问题标题】：How to test material ui autocomplete with react testing library如何使用反应测试库测试材料 ui 自动完成
【发布时间】：2020-07-07 23:04:22
【问题描述】：

我正在使用 material-ui autocomplete 组件并尝试使用 react-testing-library 对其进行测试

组件：

/* eslint-disable no-use-before-define */
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import React from 'react';

export default function ComboBox() {
  const [autocompleteInputValue, setAutocompleteInputValue] = React.useState('');
  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false);
  const renderInput = (params: any) => <TextField {...params} label='openOnFocus: false' variant='outlined' />;

  const getTitle = (option: any) => option.title;

  const handleAutocompleteInputChange = (event: any, value: string) => {
    setAutocompleteInputValue(value);
  };

  const updateAutocompletePopper = () => {
    setIsAutocompleteOpen(!isAutocompleteOpen);
  };

  return (
    <Autocomplete
      id='autocompleteSearch'
      data-testid='autocomplete-search'
      disableClearable={true}
      renderOption={getTitle}
      getOptionLabel={getTitle}
      renderInput={renderInput}
      options={top100Films}
      clearOnEscape={true}
      onInputChange={handleAutocompleteInputChange}
      inputValue={autocompleteInputValue}
      open={isAutocompleteOpen}
      onOpen={updateAutocompletePopper}
      onClose={updateAutocompletePopper}
      style={{ width: 300 }}
      ListboxProps={{ 'data-testid': 'list-box' }}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
export const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: 'Schindlers List', year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
  { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
  { title: 'One Flew Over the Cuckoos Nest', year: 1975 },
  { title: 'Goodfellas', year: 1990 },
  { title: 'The Matrix', year: 1999 },
  { title: 'Seven Samurai', year: 1954 },
  { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
  { title: 'City of God', year: 2002 },
  { title: 'Se7en', year: 1995 },
  { title: 'The Silence of the Lambs', year: 1991 },
  { title: 'Its a Wonderful Life', year: 1946 },
  { title: 'Life Is Beautiful', year: 1997 },
  { title: 'The Usual Suspects', year: 1995 },
  { title: 'Léon: The Professional', year: 1994 },
  { title: 'Spirited Away', year: 2001 },
  { title: 'Saving Private Ryan', year: 1998 },
  { title: 'Once Upon a Time in the West', year: 1968 },
  { title: 'American History X', year: 1998 },
  { title: 'Interstellar', year: 2014 },
  { title: 'Casablanca', year: 1942 },
  { title: 'City Lights', year: 1931 },
  { title: 'Psycho', year: 1960 },
  { title: 'The Green Mile', year: 1999 },
  { title: 'The Intouchables', year: 2011 },
  { title: 'Modern Times', year: 1936 },
  { title: 'Raiders of the Lost Ark', year: 1981 },
  { title: 'Rear Window', year: 1954 },
  { title: 'The Pianist', year: 2002 },
  { title: 'The Departed', year: 2006 },
  { title: 'Terminator 2: Judgment Day', year: 1991 },
  { title: 'Back to the Future', year: 1985 },
  { title: 'Whiplash', year: 2014 },
  { title: 'Gladiator', year: 2000 },
  { title: 'Memento', year: 2000 },
  { title: 'The Prestige', year: 2006 },
  { title: 'The Lion King', year: 1994 },
  { title: 'Apocalypse Now', year: 1979 },
  { title: 'Alien', year: 1979 },
  { title: 'Sunset Boulevard', year: 1950 },
  {
    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
    year: 1964,
  },
  { title: 'The Great Dictator', year: 1940 },
  { title: 'Cinema Paradiso', year: 1988 },
  { title: 'The Lives of Others', year: 2006 },
  { title: 'Grave of the Fireflies', year: 1988 },
  { title: 'Paths of Glory', year: 1957 },
  { title: 'Django Unchained', year: 2012 },
  { title: 'The Shining', year: 1980 },
  { title: 'WALL·E', year: 2008 },
  { title: 'American Beauty', year: 1999 },
  { title: 'The Dark Knight Rises', year: 2012 },
  { title: 'Princess Mononoke', year: 1997 },
  { title: 'Aliens', year: 1986 },
  { title: 'Oldboy', year: 2003 },
  { title: 'Once Upon a Time in America', year: 1984 },
  { title: 'Witness for the Prosecution', year: 1957 },
  { title: 'Das Boot', year: 1981 },
  { title: 'Citizen Kane', year: 1941 },
  { title: 'North by Northwest', year: 1959 },
  { title: 'Vertigo', year: 1958 },
  { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
  { title: 'Reservoir Dogs', year: 1992 },
  { title: 'Braveheart', year: 1995 },
  { title: 'M', year: 1931 },
  { title: 'Requiem for a Dream', year: 2000 },
  { title: 'Amélie', year: 2001 },
  { title: 'A Clockwork Orange', year: 1971 },
  { title: 'Like Stars on Earth', year: 2007 },
  { title: 'Taxi Driver', year: 1976 },
  { title: 'Lawrence of Arabia', year: 1962 },
  { title: 'Double Indemnity', year: 1944 },
  { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
  { title: 'Amadeus', year: 1984 },
  { title: 'To Kill a Mockingbird', year: 1962 },
  { title: 'Toy Story 3', year: 2010 },
  { title: 'Logan', year: 2017 },
  { title: 'Full Metal Jacket', year: 1987 },
  { title: 'Dangal', year: 2016 },
  { title: 'The Sting', year: 1973 },
  { title: '2001: A Space Odyssey', year: 1968 },
  { title: 'Singin in the Rain', year: 1952 },
  { title: 'Toy Story', year: 1995 },
  { title: 'Bicycle Thieves', year: 1948 },
  { title: 'The Kid', year: 1921 },
  { title: 'Inglourious Basterds', year: 2009 },
  { title: 'Snatch', year: 2000 },
  { title: '3 Idiots', year: 2009 },
  { title: 'Monty Python and the Holy Grail', year: 1975 },
];

根据从自动完成中选择的选项，我正在做一些其他的事情，比如渲染芯片、另一个组件等。但为了简单起见，最初我只是测试，当用户专注于输入字段时，显示弹出窗口，以便稍后，我可以单击此弹出窗口中的一个选项并测试其他所有内容是否按预期工作。我正在使用data-testid 验证弹出窗口，我通过自动完成的ListboxProps 属性分配给列表框：

测试：

import {
    fireEvent,
    getByRole as globalGetByRole,
    getByText as globalGetByText,
    render,
} from '@testing-library/react';
import React from 'react';
import ComboBox, { top100Films } from './AutoComplete';

test('that autocomplete works', async () => {
    const { getByTestId, getByRole, queryByRole } = render(<ComboBox />, {});

    const AutoCompleteSearch = getByTestId('autocomplete-search');
    const Input = globalGetByRole(AutoCompleteSearch, 'textbox');

    expect(queryByRole('listbox')).toBeNull();

    fireEvent.mouseDown(Input);
    const ListBox = getByRole('listbox');
    expect(ListBox).toBeDefined();
    const menuItem1 = globalGetByText(ListBox, top100Films[0].title);
    fireEvent.click(menuItem1);
    expect(queryByRole('listbox')).toBeNull();

    fireEvent.mouseDown(Input);
    const ListBoxAfter = getByRole('listbox');
    expect(ListBoxAfter).toBeDefined();
    const menuItem2 = globalGetByText(ListBoxAfter, top100Films[1].title);
    fireEvent.click(menuItem2);
    expect(queryByRole('listbox')).toBeNull();
});

但这失败了：Unable to find an element by: [data-testid="list-box"]。我做错了什么？

编辑：我在Input 上解雇了mouseDown，并成功地测试了弹出窗口是否打开。我使用listbox 角色而不是data-testid 来验证弹出窗口是否已打开。 data-testid 也可以这样做。然后，我从自动完成选项中选择了一个项目并关闭了弹出窗口。现在，我第二次尝试再次打开弹出窗口，在这里，它再次失败。使用mouseDown 事件第二次无法打开。

【问题讨论】：

在尝试更改 autoComplete 值时，createRange 可能还有其他问题。放上配置：//stackoverflow.com/questions/60333156/…global.document.createRange = () => ({ setStart: () => {}, setEnd: () => {}, commonAncestorContainer: { nodeName: 'BODY', ownerDocument : 文档, }, });
@IdoBleicher 非常感谢！我收到错误消息“无法读取未定义的属性 'nodeName'”，并且您发布的链接中的解决方案节省了我的时间！
完全没问题 :) 随时@AndreasBerger，很高兴它对您有所帮助！
这段代码有效吗？

标签： reactjs typescript autocomplete material-ui react-testing-library

【解决方案1】：

尚未对 mui 示例进行测试，但已在我的应用程序上进行了测试，并且以下工作：

userEvent.type(screen.getByRole("textbox", {name: /attendees/i}), "Bertrand")
userEvent.click(screen.getByText(/bertrand/i))

模拟来自 userEvent 的类型（此处为 Bertrand，在您的示例中为：Schindlers），其中给 screen.getByRole 的名称是您的自动完成标签的值（在您的示例中为：openOnFocus: false. 然后模拟点击预期文本（即：您的选项中存在的文本，例如Schindlers）。

注意：我已经在 @mui/material AutoComplete 上测试过它，而不是在实验室

【讨论】：

【解决方案2】：

我找到了这个作为我的解决方案

const autoComplete = getByLabelText('component-autoComplete');
const input = within(autoComplete).getByRole('textbox');

autoComplete.focus();
fireEvent.change(input, { target: { value: 'mockValue' } });
fireEvent.keyDown(autoComplete, { key: 'ArrowDown' });
fireEvent.keyDown(autoComplete, { key: 'Enter' });
expect(input).toHaveValue('mockValue');

【讨论】：

欢迎来到 SO。在大多数情况下，纯代码答案缺乏解释；考虑解释这如何回答问题，以便为未来的其他用户增加价值。

【解决方案3】：

这是我使用 react-testing-library -> user-event 对它的看法。为了使它工作，我必须将 data-testid 分配给自动完成中显示的菜单选项。

    const autoComplete = screen.getByRole("combobox");

    expect(autoComplete).toBeVisible();

    const autoCompleteDropdown = screen.getByRole("button", { name: "Open" });

    // Autocomplete dropdown button.
    expect(autoCompleteDropdown).toBeVisible();
    userEvent.click(autoCompleteDropdown);

    // Autocomplete dropdown view.
    expect(screen.getByRole("presentation")).toBeVisible();

    // click on administrator menu option in autocomplete.
    userEvent.click(screen.getByTestId("option1"));
    
    // imitate click away(this is only required if you have disableCloseOnSelect is enabled.
    userEvent.click(document.body);
    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();

    //Verify autocomplete shows the correct value.
    expect(screen.getByText("option1")).toBeVisible();

【讨论】：

【解决方案4】：

您需要按照以下方式进行：

点击自动完成
搜索选项
选择选项

const label = 'label of your autocomplete'
const textBox = screen.getByRole('textbox', {
  name: label,
});

userEvent.click(textBox);

// wait for option to appear
await waitFor(() => {
  screen.getByRole('listbox');
});
// grab option
const opt = screen.getByRole('option', {
  name: /The Great Dictator/i,
});
// select it
userEvent.click(opt);

【讨论】：

【解决方案5】：

首先，您需要确保选项不是空数组，然后执行以下操作：

const autocomplete = getByTestId('autocomplete');
const input = within(autocomplete).getByRole('textbox')
autocomplete.focus()
// the value here can be any string you want, so you may also consider to 
// wrapper it as a function and pass in inputValue as parameter
fireEvent.change(input, { target: { value: 'a' } })
fireEvent.keyDown(autocomplete, { key: 'ArrowDown' })
fireEvent.keyDown(autocomplete, { key: 'Enter' })

【讨论】：

元素在哪里定义？
我的输入似乎没有role 属性。我使用autocomplete.closest("input") 来查找元素。

【解决方案6】：

您可以使用 onInputChange 函数来查看输入是否已更改。

 test('my test', () => {
    const { container } = render(
      <Autocomplete
        noOptionsText="no Option"
        getOptionLabel={(option) => option.name}
        onInputChange={(__, value) => {
          //implements logic when value is selected
        }}
        multiple
        id="my-id"
        options={[{ name: 'My name 1' }]}
        renderInput={(params) => <TextField {...params} label="My Label" />}
      />
    )
    const input = container.querySelector('#my-id')
    fireEvent.change(input, { target: { value: { name: 'My name 1' } } })
  })

【讨论】：

【解决方案7】：

// make sure autocomplete reactions/results do not already exist
expect(screen.queryByText(/Loading/)).not.toBeInTheDocument()
expect(screen.queryByText(/Van Halen/)).not.toBeInTheDocument()

// fill out autocomplete
const faveBand = screen.getByLabelText(/Favorite Band/)
userEvent.type(faveBand, 'Van H')
expect(faveBand).toHaveValue('Van H')

// witness autocomplete working
expect(screen.getByText(/Loading/)).toBeInTheDocument()

// wait for response (i used an async Material-UI autocomplete)
// favebands is a data-testid attribute value in my autocomplete 
// component, e.g. ListboxProps={{ 'data-testid': 'favebands' }}
await waitFor(() => getByTestId('favebands'))

// verify autocomplete items are visible
expect(screen.getByText(/Van Halen/)).toBeInTheDocument()

// click on autocomplete item
const faveBandItem = screen.getByText('Van Halen')
userEvent.click(faveBandItem)

// verify autocomplete has new value
expect(faveBand).toHaveValue('Van Halen')

我像这样导入 userEvent、waitFor 和 screen...

import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

【讨论】：

你也可以用await waitFor(() => getByTestId('favebands'))代替await screen.findByTestId('favebands');

【解决方案8】：

由于列表项在 DOM 本身中不“可见”，因此您需要使用不同的方法。

您必须找到将触发事件的自动完成和输入 DOM 元素。

自动完成通常通过角色属性在 DOM 中找到，例如role="combobox" 但最好给它一个唯一标识符，例如 data-testid="autocomplete"

以下代码显示了如何在自动完成中测试项目选择：

   const autocomplete = getByTestId('autocomplete');
   const input = within(autocomplete).querySelector('input')

   autocomplete.focus()
   // assign value to input field
   fireEvent.change(input, { target: { value: value } })
   await wait()
   // navigate to the first item in the autocomplete box
   fireEvent.keyDown(autocomplete, { key: 'ArrowDown' })
   await wait()
   // select the first item
   fireEvent.keyDown(autocomplete, { key: 'Enter' })
   await wait()
   // check the new value of the input field
   expect(input.value).toEqual('some_value')

您需要在输入元素上插入一个值，然后触发更改。之后，列表框打开，允许通过触发回车键选择第一个值。所选值将替换输入的用于搜索/打开自动完成的初始值。

【讨论】：

@Eugen 能否发送链接或解释为什么“由于列表项在 DOM 中不可见”？谢谢！:)
Wait() 已弃用。是否有人在不使用“等待”的情况下找到了解决方案？或许 Julius 的解决方案stackoverflow.com/a/62589905/1473597 将组件渲染到 document.body 中
我试过了，但我得到的是我在开头输入的输入值，而不是我选择的项目的值

【解决方案9】：

这里的问题是默认情况下自动完成使用门户并将选项呈现到正文中。呈现的容器中不存在，您必须将自动完成呈现到文档正文中

【讨论】：