Question

我是测试新手，我正在为React应用编写测试用例。

我有一张桌子，里面有原子。

<Table.Cell style={{ cursor: "pointer" }}>
  <Icons
    data-test="nameDeleteTable"
    name="trash"
    onClick={() =>
     ConfirmBox({
      title: "Confirm Deleting?",
      message:
         "Are you sure you want to delete this entry permanently?",
      onClick: () => props.handleDelete(cell.name),
     })
    }
 />
</Table.Cell>

ConfirmBox具有以下代码

function ConfirmBox(props) {
  return (
    <div data-test="confirmboxAtom">
      {confirmAlert({
        title: `${props.title}`,
        message: `${props.message}`,
        buttons: [
          {
            label: "YES",
            onClick: props.onClick,
          },
          {
            label: "NO",
          },
        ],
      })}
    </div>
  );
}

confirmAlert来自名为react-confirm-alert的库

当前测试表格按钮点击的尝试，使用代码进入<Icons ... />的onClick

const wrapper = getWrapper(component, "nameDeleteTable");
console.log("Wrapper " , wrapper);
wrapper.props().onClick();
expect(wrapper.length).toBe(1);

在检查覆盖范围时，我可以覆盖onClick函数，但不能覆盖ConfirmBox的onClick，而且我不知道如何使其起作用。

Answer 1

您必须在onClick()呈现的内容上调用react-confirm-alert（我是指html元素）。

在React Js中测试条件渲染组件

1 个答案: