React单元测试:测试一个模糊事件

Question

在我的一个react jest单元测试中有一个问题。在我的故事书中，一切都运行良好，但我似乎无法在我的测试中测试适当的UI反应。

问题是，我有一个自定义下拉，必须关闭一个模糊事件(当你点击这个元素的父div外)，它在我的故事书工作得很好，但不是在我的单元测试。

不工作的单元测试代码:

it('should close and reset dropdown when a click is produced outside of it', () => {
render(<>
<MultilevelDropdown {...multilevelDropdownProps} />
<div> <a data-testid='outside-element'> Test </a> </div>
</>);
const multilevelDropdown = screen.getByText('Ajouter une démarche');
fireEvent.click(multilevelDropdown);
const group = screen.getByText('Matière');
fireEvent.click(group);
expect(screen.getByText('Polyamide Recyclé')).toBeInTheDocument();
fireEvent.click(screen.getByTestId('outside-element'));
expect(screen.queryByText('Matière')).not.toBeInTheDocument();
expect(screen.queryByText('Polyamide Recyclé')).not.toBeInTheDocument();
expect(multilevelDropdown).not.toHaveClass('dropdown__trigger__open');
});

组件TSX代码:

const MultilevelDropdown = ({ title, groups, onSelect }: MultilevelDropdownProps) => {
const [open, setOpen] = useState(false);
const [selectedItem, setSelectedItem] = useState<SubItem | null>(null);
const [selectedGroup, setSelectedGroup ] = useState<Group | null>(null);
const handleSelection = (subItem: SubItem | null) => {
if (subItem) {
setSelectedItem(subItem);
onSelect(subItem.name);
setOpen(!open);
} else {
setSelectedItem(null);
setSelectedGroup(null);
setOpen(!open);
}
};
return (
<MultilevelDropdownContext.Provider value={{handleSelection, selectedGroup, setSelectedGroup}}>
<div tabIndex={0} onBlur={() => handleSelection(null)} className={clsx('dropdown',
{ 'dropdown__open': open})}>
<div className={clsx('dropdown__trigger', {'dropdown__trigger__open': open})} onClick={() => handleSelection(null)}>
{ generateDropdownLabel(selectedGroup, selectedItem, title) }
<VtmnIcon value={open ? 'arrow-drop-up-line' : 'arrow-drop-down-line'} size={20} color={open ? 'black' : 'white'} />
</div>
{ open && (
<ul>
{groups?.map((group) =>
isToDisplayGroup(selectedGroup, group) && <DropdownGroup key={group.id} group={group} />)}
</ul>
)}
</div>
</MultilevelDropdownContext.Provider>
);
};
export default MultilevelDropdown;

onBlur()事件结合到tabIndex在我的故事书中工作得很好。我不明白发生了什么。在我的测试中，尽管我点击了另一个元素，它似乎并没有关闭我的下拉菜单。

希望你能帮助和提前感谢!

Answer 1

我认为您不应该使用onBlur事件来处理"在此元素的父div之外单击"。
在这种情况下，我使用的是useOnClickOutside钩子。
当你使用这个钩子时，你的测试逻辑应该通过。