测试 SVG 格式的图标

Question

如何测试按钮中添加的图标？此按钮触发打开菜单。 menuTriggerLabel 是常量。

import { Button } from '@material-ui/core';
import { ExpandLess, ExpandMore } from '@material-ui/icons';
import React from 'react';

export const myMenuTriggerLabel = 'My menu';

export const MyMenu = () => {
  const [open, setOpen] = React.useState(false);
  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };
  return (
    <div>
      <Button onClick={handleToggle} endIcon={open ? <ExpandLess /> : <ExpandMore />}>
        {myMenuTriggerLabel}
      </Button>
    </div>
  );
};

我想测试图标是否为ExpandMore，点击按钮，测试图标是否为ExpandLess，再次点击按钮，测试图标是否为ExpandMore。

it('should render proper icon on show and hide', async () => {
  const component = render(<MyMenu />);
  const icon = component.getByText(menuTriggerLabel)
  ???
  

我知道如何点击按钮。我不知道如何断言图标。

Answer 1

我不熟悉 react-testing 库。 但我喜欢开玩笑+ Enzime。主要思想是通过组件选择来测试它。

可能类似于 jest+Enzime。

const checkOpenState = (tree, state) => {
    expect(!!tree.find(ExpandLess).length).toBe(state)
};
const checkCloseState = (tree, state) => {
   expect(!!tree.find(ExpandMore).length).toBe(state)
};
const toggleState = (tree) => {
   tree.find(Button).props().onClick();
}
it('should render proper icon on show and hide', async () => {
  const component = shallow(<MyMenu />);
  checkOpenState(component, false);
  checkCloseState(component, true);

  toggleState(component);

  checkOpenState(component, true);
  checkCloseState(component, false);

对于 react-testing-library，您可以查看文档并调整我的解决方案）