QUnit上下文传递在子模块中表现不一致问题咨询

嘿，我之前也踩过QUnit模块上下文传递的这个坑，尤其是嵌套子模块之后的上下文丢失问题，简直让人头大！让我帮你理清楚问题出在哪，以及怎么解决。

问题原因分析 #

首先要明确：QUnit的每个模块（包括嵌套的子模块）都拥有独立的上下文对象，子模块不会自动继承父模块的上下文状态。而且当子模块执行完毕后，后续的测试或模块并不会自动恢复到父模块的上下文，而是会创建一个全新的上下文实例——这就是你看到“子模块之后上下文被清空”的根本原因。

我们先把你的代码补全，更清晰地展示这个问题：

QUnit.module('TEST #1', { 
  before: function() { 
    console.log('Test #1 - before: ', this); 
    this.abc = 123; 
  } 
}, function() { 
  // 顶层测试：能正常拿到父模块上下文
  QUnit.test('Test A', function() { 
    console.log("test A: ", this); // 输出包含abc:123
  });
  QUnit.test('Test B', function() { 
    console.log("test B: ", this); // 同样包含abc:123
  });

  // 子模块：拥有独立的新上下文
  QUnit.module('SUB TEST #1.1', {
    before: function() {
      console.log('Sub Test #1.1 - before: ', this); // 这里的上下文没有abc
    }
  }, function() {
    QUnit.test('Sub Test C', function() {
      console.log("sub test C: ", this); // 子模块自己的上下文
    });
  });

  // 子模块之后的顶层测试：上下文被重置
  QUnit.test('Test D', function() { 
    console.log("test D: ", this); // 这里的上下文是空的，没有abc！
  });
});

解决方案 #

根据你的需求，这里提供几种实用的解决思路：

1. 用闭包保存共享状态（推荐）

通过闭包变量保存父模块的上下文，在后续测试或子模块中手动引用，这是最稳妥的方式，不会污染全局环境：

// 用闭包变量保存需要共享的父模块上下文
let parentModuleContext;

QUnit.module('TEST #1', { 
  before: function() { 
    this.abc = 123;
    parentModuleContext = this; // 保存到闭包
  } 
}, function() { 
  QUnit.test('Test A', function() { 
    console.log("test A: ", this.abc); // 123
  });

  QUnit.module('SUB TEST #1.1', {
    before: function() {
      // 可选：把父模块的属性合并到子模块上下文
      Object.assign(this, parentModuleContext);
      this.def = 456; // 添加子模块自己的属性
    }
  }, function() {
    QUnit.test('Sub Test C', function() {
      console.log(this.abc); // 123
      console.log(this.def); // 456
    });
  });

  QUnit.test('Test D', function() { 
    // 手动引用闭包里的父上下文
    console.log("test D parent abc: ", parentModuleContext.abc); // 123
    // 也可以把属性赋值到当前测试上下文
    this.abc = parentModuleContext.abc;
    console.log("test D this abc: ", this.abc); // 123
  });
});

2. 全局变量（不推荐，仅临时测试用）

如果只是临时调试，可以把共享变量挂到全局对象上，但这种方式容易污染全局环境，不适合大型测试套件：

QUnit.module('TEST #1', { 
  before: function() { 
    window.abc = 123; // 挂到全局
  } 
}, function() { 
  // 后续所有测试都能通过window.abc访问
  QUnit.test('Test D', function() { 
    console.log("test D abc: ", window.abc); // 123
  });
});

3. 利用QUnit的setup钩子（适合每个测试都需要初始化的场景）

如果每个测试都需要用到相同的上下文属性，可以用模块的setup钩子（每个测试执行前都会运行）替代before，这样即使切换模块，回到父模块的测试时，setup会重新初始化上下文：

QUnit.module('TEST #1', { 
  setup: function() { // 每个测试前都会执行
    this.abc = 123;
  } 
}, function() { 
  // 子模块之后的Test D执行前，setup会重新设置abc
  QUnit.test('Test D', function() { 
    console.log("test D abc: ", this.abc); // 123
  });
});

总结 #

QUnit的模块上下文设计是模块隔离的，每个模块都有自己独立的上下文实例，不会自动继承或保留之前的状态。解决这类问题的核心就是通过闭包、全局变量（不推荐）或钩子函数，手动管理需要共享的状态。

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