Jasmine测试JavaScript背景切换函数遇阻，寻求技术帮助

嘿，作为刚接触测试的新手，踩这个坑太正常啦！我帮你捋清楚问题出在哪，再给你一套能跑通的测试方案～

先说说原测试代码里的几个核心问题 #

• 函数调用方式错了：你写的 "changeBackground"(x) 是把字符串当函数调用，正确的写法应该是直接 changeBackground(x)
• 断言逻辑不对：changeBackground 函数没有返回值，它是直接修改document.body的样式，所以用expect(...).toBe("white")根本不会生效——函数返回的是undefined，永远匹配不上"white"
• 没考虑测试环境的特殊性：测试环境里没有真实的浏览器窗口，没法直接用原生的window.matchMedia，得手动模拟这个对象才能控制媒体查询的匹配状态

第一步：优化你的JavaScript函数（可选，但更易测试） #

先把原函数改成不依赖全局变量的形式，这样测试时更灵活，也避免全局变量污染：

function changeBackground(mediaQueryList) {
  if (mediaQueryList.matches) {
    document.body.style.backgroundColor = "white";
  } else {
    document.body.style.backgroundColor = "#F6F6F6";
  }
}

// 保留原有的初始化逻辑，不影响正常功能
const mediaQuery = window.matchMedia("(max-width: 768px)");
changeBackground(mediaQuery);
mediaQuery.addListener(changeBackground);

第二步：修正后的Jasmine测试代码 #

describe("background-color behavior", function() {
  // 每个测试前重置body背景色，避免测试间互相干扰
  beforeEach(function() {
    document.body.style.backgroundColor = "";
  });

  it("sets background to white when screen is ≤768px", function() {
    // 模拟一个"匹配状态"的媒体查询对象
    const mockMatchingMedia = { matches: true };
    // 调用目标函数
    changeBackground(mockMatchingMedia);
    // 断言body的背景色是否符合预期
    expect(document.body.style.backgroundColor).toBe("white");
  });

  it("sets background to #F6F6F6 when screen is >768px", function() {
    // 模拟一个"不匹配状态"的媒体查询对象
    const mockNonMatchingMedia = { matches: false };
    changeBackground(mockNonMatchingMedia);
    // 注意：浏览器会自动把十六进制颜色转成RGB格式，所以这里要断言RGB值
    expect(getComputedStyle(document.body).backgroundColor).toBe("rgb(246, 246, 246)");
  });
});

关键细节解释 #

• 模拟媒体查询对象：测试环境没有真实窗口，所以我们手动创建带matches属性的对象，通过控制true/false来覆盖两种屏幕场景
• 正确的断言目标：因为函数是修改DOM样式，所以要直接断言document.body的样式属性，而不是函数返回值
• 测试隔离：用beforeEach在每个测试前重置背景色，保证每个测试都是独立干净的环境

如果之后你想测试addListener的绑定逻辑，还可以给模拟对象加个addListener方法，验证它是否被正确调用，不过先把上面的基础测试跑通就够啦～

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