如何使用Jest测试无输入参数的JS侧边栏切换功能函数？

这个函数属于DOM操作类无入参函数，测试核心逻辑不需要对比输入输出，而是验证函数执行后DOM状态、全局变量的取值是否符合预期。Jest内置的jsdom可以直接模拟浏览器DOM环境，无需真实浏览器就能完成测试，新手可以按以下步骤操作：

1. 前置环境准备 #

• 首先开启Jest的jsdom支持，在jest.config.js中添加配置项：testEnvironment: "jsdom"即可。
• 每个测试用例执行前重置DOM结构和全局状态，避免用例之间互相干扰，测试文件开头添加如下代码：

// 导入你写的toggleStatus和navStatus，如果是全局变量可以直接挂在window上
import { toggleStatus, navStatus } from './你的源码文件路径.js'

beforeEach(() => {
  // 构造和实际页面结构一致的侧边栏DOM
  document.body.innerHTML = `
    <div class="sidebar" style="width: 50px">
      <ul style="visibility: hidden">
        <li><a href="#" style="opacity: 0">首页</a></li>
        <li><a href="#" style="opacity: 0">设置</a></li>
        <li><a href="#" style="opacity: 0">帮助</a></li>
      </ul>
    </div>
  `;
  // 重置导航状态为初始关闭状态
  window.navStatus = false;
  // Mock源码中用到的closeMenu函数，避免外部依赖干扰测试
  window.closeMenu = jest.fn();
});

2. 编写第一个测试用例：侧边栏从关闭切换到打开 #

验证初始状态下调用一次切换函数后，所有元素状态符合打开的预期：

test('侧边栏从关闭切换为打开时，所有状态符合预期', () => {
  // 先校验初始状态是否正确
  expect(navStatus).toBe(false);
  expect(document.querySelector('.sidebar').style.width).toBe('50px');
  expect(document.querySelector('.sidebar ul').style.visibility).toBe('hidden');
  document.querySelectorAll('.sidebar a').forEach(link => {
    expect(link.style.opacity).toBe('0');
  });

  // 执行切换函数
  toggleStatus();

  // 校验打开后的状态
  expect(closeMenu).toHaveBeenCalledTimes(1); // 确认closeMenu被调用
  expect(navStatus).toBe(true);
  expect(document.querySelector('.sidebar').style.width).toBe('272px');
  expect(document.querySelector('.sidebar ul').style.visibility).toBe('visible');
  document.querySelectorAll('.sidebar a').forEach(link => {
    expect(link.style.opacity).toBe('1');
  });
});

3. 编写第二个测试用例：侧边栏从打开切换到关闭 #

验证侧边栏打开后再调用一次切换函数，所有元素状态符合关闭的预期：

test('侧边栏从打开切换为关闭时，所有状态符合预期', () => {
  // 先调用一次把侧边栏打开
  toggleStatus();
  expect(navStatus).toBe(true);

  // 再调用一次切换为关闭
  toggleStatus();

  // 校验关闭后的状态
  expect(navStatus).toBe(false);
  expect(document.querySelector('.sidebar').style.width).toBe('50px');
  expect(document.querySelector('.sidebar ul').style.visibility).toBe('hidden');
  document.querySelectorAll('.sidebar a').forEach(link => {
    expect(link.style.opacity).toBe('0');
  });
});

如果你的toggleStatus和navStatus是全局变量，不需要导出，直接在测试文件中挂在window对象上即可正常调用。

内容的提问来源于stack exchange，提问作者Bronx.