测试点击某物时会发生什么（开玩笑）

Question

我是反应的初学者，如何知道什么时候应该模拟一些东西？例如，在“ListItem”中，当单击“相机”下拉菜单时，我有“单击我”，所以如果我应该检查单击“单击我”时会发生什么或它包含什么。我需要嘲笑这个还是别的什么？目前，我正在使用我的代码验证组件是否存在。

import {
  List,
  ListItem,
  ListItemText,
  ListItemSecondaryAction,
  Collapse,
  IconButton,
  MenuItem,
} from "@material-ui/core/";
export const SelectionList:

interface SelectionList {
  actionArgs?: string | undefined;
  onUpdateClick: (e: any) => void;
  onDeleteClick: (e: any) => void;
  onDetailsClick: (e: any) => void;
  action: string;
  name?: string;
  identifier?: string;
  classes: {
    button_basic: string;
    formControl: string;
    selectionCard: string;
  };
}

React.FC<SelectionList> = (
  props
) => {
  const itemListCollapseKey = props.action + "-itemlist-collapse";
  const [collapseStates, setCollapseStates] = useState({
    [itemListCollapseKey]: false,
  });
  const dispatch = useDispatch();

  const handleExpandClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
    key: string
  ) => {
    setCollapseStates({
      ...collapseStates,
      [key]: !collapseStates[key],
    });
  };

  const listItems = (
    key: React.Key | null | undefined,
    content: SelectionList | undefined | string,
    element: SelectionList
  ) => {
    return (
      <MenuItem
        key={key}
        selected={isElementSelected(element)}
        button
        onClick={(event) => {
          selectElement(element);
        }}
      >
        <ListItemText primary={content} key={key + "-litext"}></ListItemText>
        <ListItemSecondaryAction
        // p={1}
        >
          <IconButton
            onClick={(e) => handleDetailsClick(e, element)}
            aria-label="details"
          >
          </IconButton>
        </ListItemSecondaryAction>
      </MenuItem>
    );
  };

  

  let childList: React.ReactElement | string = "";
  if (data && data.length > 0) {
    childList = (
      <Collapse
        key={itemListCollapseKey}
        in={collapseStates[itemListCollapseKey]}
        unmountOnExit
      >
        {data.map((el) => (
          <List key={keyFromEl(el) + "sublist"}>
            {listItems(keyFromEl(el), el.name, el)}
          </List>
        ))}
      </Collapse>
    );
  }

  return (
    <List component="div" data-testid="SelectionListt">
      <ListItem
        key={props.action + "-header"}
        button
        onClick={(event) => {
          handleExpandClick(event, itemListCollapseKey);
        }}
      >
        click me
      </ListItem>

      {childList}
    </List>
  );
};

我的测试：

import "@testing-library/jest-dom/extend-expect";

function handleUpdateClick(event: any, type = "") {}
test("test", () => {
  render(
    <Provider store={store}>
      <SelectionList
        classes={{ button_basic: "", formControl: "", selectionCard: "" }}
        action={"cameras"}
        actionArgs={""}
        onUpdateClick={handleUpdateClick}
        onDeleteClick={handleUpdateClick}
        onDetailsClick={handleUpdateClick}
      />
    </Provider>
  );
  const SelectionCardElement = screen.getByTestId("SelectionListt");
  expect(SelectionCardElement).toBeInTheDocument();
});

Answer 1

我建议您将组件视为单独的可测试单元。因此，当您测试 ListItem 时 - 您可以测试所有 ListItem 功能。然后，当您测试 SelectionList - 您模拟 ListItem 组件并仅测试所有 SelectionList 功能。

然后，您将通过创建不关注实现的集成测试来测试这两个组件如何相互集成，而是关注页面上呈现的内容，用户实际可以看到的内容。

更新

我的意思是（在伪代码中）：

// ListItem.spec.jsx
it.todo("list item renders");
it("list item triggers click callback when clicked", () => {
  const onClickCallback = jest.fn();
  const elem = render(<ListItem onClick={onClickCallback} />);
  elem.click();
  expect(onClickCallback).toHaveBeenCalledTimes(1);
});

和

// SelectionList
it.todo("selection list renders");

至于你如何模拟，最简单的方法是这样做：

<SelectionList listItemComponent={ListItem} />

或

<SelectionList listItemComponent={<ListItem props="bla"/>} />

等等