React 单元测试：测试模糊事件

Question

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

问题是我有一个自定义的 dropdpwn，它必须在发生模糊事件时关闭（当您在该元素的父 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;

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

希望您能提供帮助并提前致谢！

Answer 1

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

React 单元测试：测试模糊事件

React unit test : test a blur event

reactjs

jestjs

tsx