如何在没有输入的情况下测试 JS 函数（使用 Jest）

Question

我制作了一个包含侧边栏的简单网站。单击侧边栏图标时，它应该打开或关闭。我编写的以下代码正是这样做的。

/** toggleStatus is a anonymous function and can be called with its name */

let navStatus = false;

let toggleStatus = function () {
  let getSidebar = document.querySelector(".sidebar");
  let getSidebarUl = document.querySelector(".sidebar ul");
  let getSidebarLinks = document.querySelectorAll(".sidebar a");

  if (navStatus === false) {
    // if Sidebar is closed
    closeMenu();
    getSidebarUl.style.visibility = "visible";
    getSidebar.style.width = "272px"; // change width of sidebar so the content can fit

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      // Smake every List item Visible
      getSidebarLinks[i].style.opacity = "1";
    }

    navStatus = true;
  } else {
    // if Sidebar is open
    getSidebarUl.style.visibility = "hidden";
    getSidebar.style.width = "50px"; // change width of sidebar to the base Design

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      // make every List item invisible
      getSidebarLinks[i].style.opacity = "0";
    }

    navStatus = false;
  }
};

现在我必须用 Jest 为这个函数编写一个测试，但我不知道从哪里开始。我不能用任何输入喂它并比较预期的输出。有没有人给新手一些提示？

谢谢！

Answer 1

如果你的函数没有明确的输出，并不意味着它什么都不做。该函数具有一些“行为”，在您的情况下，它会执行一些 DOM 操作。所以你应该测试一下。

您有两种选择：

1. 模拟所需的 DOM API 函数并期望模拟对象的道具具有您喜欢的形状。
2. 使用其他工具通过快照测试呈现实际 HTML。