我正在使用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"]
。我在做什么错了?
编辑:
我在mouseDown
上触发了Input
,并成功测试了弹出窗口是否打开。我使用listbox
角色而不是data-testid
来验证弹出窗口是否已打开。 data-testid
也可以完成相同的操作。然后,我从自动完成选项中选择了一个项目,然后弹出窗口关闭。现在,我尝试第二次再次打开弹出窗口,在这里,它再次失败。无法使用mouseDown
事件第二次打开。
答案 0 :(得分:3)
由于列表项在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')
您需要在输入元素上插入一个值,然后触发更改。之后,将打开列表框,该列表框允许通过按Enter键选择第一个值。所选值将替换用于搜索/打开自动完成功能的输入初始值。
答案 1 :(得分:1)
这是我使用 react-testing-library -> 用户事件的看法。 为了使它工作,我必须将 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();
答案 2 :(得分:0)
这里的问题是,默认情况下,自动完成功能会使用门户网站并将选项呈现到正文中。在呈现的容器中不存在此功能,您必须将自动完成功能呈现到文档主体中
答案 3 :(得分:0)
// 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和屏幕...
import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
答案 4 :(得分:0)
首先,您需要确保选项不是空数组,然后执行以下操作:
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' })
答案 5 :(得分:0)
您可以使用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' } } })
})
答案 6 :(得分:0)
我发现这个是我的解决方案
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');
答案 7 :(得分:-1)
尝试在整个文档正文中搜索选择选项,例如:
getByText(document.body, top100Films[1].title)
如朱利叶斯·科隆奇(Julius Koronci)所说,选项列表在主体中呈现(由于门户),而不是您声明自动完成的位置。
答案 8 :(得分:-2)
您需要按照以下步骤操作:
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);