在 React Js 中測試條件渲染組件

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

您必須在此react-confirm-alert呈現的任何內容上調用onClick() （我的意思是 html 元素）。