QUnit测试中能否使用多个独立的qunit-fixture？

当然可以实现！QUnit本身默认只识别#qunit-fixture这个元素，并且会在每次测试前自动重置它的状态，但咱们完全可以通过一些简洁的技巧，为不同测试用例配置专属的fixture，不用每次手动切换display属性那么繁琐。

下面分享两种最实用的实现方式：

方法一：动态替换默认Fixture内容（推荐） #

这是最贴合QUnit设计理念的方案——利用QUnit自动重置#qunit-fixture的特性，在测试前把目标fixture的内容注入进去。

第一步：准备模板化的Fixture #

把不同测试需要的fixture内容存为模板（用script标签隐藏是个不错的选择，不会渲染到页面）：

<div id="qunit-fixture"></div>

<!-- 测试1专属Fixture模板 -->
<script type="text/template" id="fixture-test-1">
  <div class="user-card">
    <h3>测试用户1</h3>
    <button class="delete-btn">删除</button>
  </div>
</script>

<!-- 测试2专属Fixture模板 -->
<script type="text/template" id="fixture-test-2">
  <ul class="todo-list">
    <li class="todo-item">待办事项1</li>
    <li class="todo-item completed">待办事项2</li>
  </ul>
</script>

第二步：在测试中注入对应Fixture #

可以直接在单个测试里注入，或者用module分组批量配置：

// 方式1：单个测试独立配置
QUnit.test("测试用户删除功能", function(assert) {
  // 将测试1的模板内容插入默认fixture
  document.getElementById('qunit-fixture').innerHTML = document.getElementById('fixture-test-1').innerHTML;
  
  // 接下来写你的测试逻辑
  const deleteBtn = document.querySelector('.delete-btn');
  deleteBtn.click();
  assert.notOk(document.querySelector('.user-card'), "用户卡片已成功删除");
});

// 方式2：按测试组批量配置（更高效）
QUnit.module("待办事项测试组", {
  beforeEach: function() {
    // 该组下的所有测试都会自动加载这个fixture
    document.getElementById('qunit-fixture').innerHTML = document.getElementById('fixture-test-2').innerHTML;
  }
});

QUnit.test("测试已完成事项样式", function(assert) {
  const completedItem = document.querySelector('.completed');
  assert.ok(completedItem.classList.contains('completed'), "已完成事项样式正确");
});

QUnit.test("测试待办事项数量", function(assert) {
  const todoItems = document.querySelectorAll('.todo-item');
  assert.equal(todoItems.length, 2, "待办事项数量正确");
});

这种方法的好处是：QUnit会在每次测试后自动清空#qunit-fixture，完全不用担心测试间的DOM污染，省心又可靠。

方法二：自定义Fixture管理（适合特殊场景） #

如果你的场景必须保留多个独立的DOM元素作为fixture，也可以手动管理它们的显示/隐藏和状态重置，但需要额外注意清理工作：

第一步：准备多个Fixture元素 #

<div id="qunit-fixture"></div>
<div id="fixture-test-1" class="custom-fixture" style="display:none;">
  <!-- 测试1内容 -->
</div>
<div id="fixture-test-2" class="custom-fixture" style="display:none;">
  <!-- 测试2内容 -->
</div>

第二步：编写Fixture管理工具函数 #

// 保存每个fixture的原始内容，用于测试后重置
document.querySelectorAll('.custom-fixture').forEach(fixture => {
  fixture.dataset.originalHtml = fixture.innerHTML;
});

// 激活目标fixture，隐藏其他
function activateFixture(fixtureId) {
  document.querySelectorAll('.custom-fixture').forEach(fixture => {
    fixture.style.display = 'none';
  });
  const targetFixture = document.getElementById(fixtureId);
  targetFixture.style.display = 'block';
}

// 重置所有fixture到初始状态
function resetFixtures() {
  document.querySelectorAll('.custom-fixture').forEach(fixture => {
    fixture.style.display = 'none';
    fixture.innerHTML = fixture.dataset.originalHtml;
  });
}

第三步：在测试中使用 #

QUnit.test("自定义Fixture测试", function(assert) {
  activateFixture('fixture-test-1');
  
  // 测试逻辑...
  
  // 测试结束后重置
  resetFixtures();
});

这种方法需要手动处理重置，容易遗漏导致测试污染，所以除非必要，更推荐第一种方案。

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