AngularJS组件Jasmine测试中$state.current为空的问题

这个问题的核心原因很明确：在Jasmine测试环境中，默认没有任何激活的UI-Router状态，所以$state.current会是空对象或者undefined，而你的组件在$onInit钩子中直接读取了这个值，自然拿不到预期的状态数据。下面给你两种常用的解决思路：

方案一：手动模拟$state.current的值 #

如果你的测试只需要验证组件对状态数据的处理逻辑，直接在测试前置环节模拟$state.current的结构是最直接的方式：

describe('listing component', () => {
  let $componentController;
  let $state;

  // 加载应用模块和ui-router模块
  beforeEach(module('yourAppModule')); // 替换成你的实际应用模块（包含路由配置）
  beforeEach(module('ui.router'));

  beforeEach(inject((_$componentController_, _$state_) => {
    $componentController = _$componentController_;
    $state = _$state_;

    // 手动模拟当前激活的状态，完全匹配你的路由配置结构
    $state.current = {
      name: 'app.students.active',
      data: { tab: 'active' }
    };
  }));

  it('should set state variables correctly during $onInit', () => {
    // 创建组件控制器
    const ctrl = $componentController('listing', null, null);
    // 手动触发$onInit钩子
    ctrl.$onInit();

    // 验证变量是否正确赋值
    expect(ctrl.myStateName).toBe('app.students.active');
    expect(ctrl.myStateData.tab).toBe('active');
  });
});

方案二：通过$state.go激活真实状态 #

如果你的测试需要更贴近真实运行环境（比如验证路由切换后的组件行为），可以使用$state.go激活目标状态，注意要处理异步操作：

describe('listing component', () => {
  let $componentController;
  let $state;
  let $rootScope;

  beforeEach(module('yourAppModule'));
  beforeEach(module('ui.router'));

  beforeEach(inject((_$componentController_, _$state_, _$rootScope_) => {
    $componentController = _$componentController_;
    $state = _$state_;
    $rootScope = _$rootScope_;

    // 触发状态跳转
    $state.go('app.students.active');
    // 手动触发AngularJS的digest循环，完成状态切换的异步操作
    $rootScope.$apply();
  }));

  it('should initialize state variables correctly', () => {
    const ctrl = $componentController('listing', null, null);
    ctrl.$onInit();

    expect(ctrl.myStateName).toBe('app.students.active');
    expect(ctrl.myStateData.tab).toBe('active');
  });
});

如果使用Jasmine 2.x及以上版本，也可以用done()回调处理异步流程：

it('should initialize state variables correctly', (done) => {
  $state.go('app.students.active').then(() => {
    const ctrl = $componentController('listing', null, null);
    ctrl.$onInit();

    expect(ctrl.myStateName).toBe('app.students.active');
    expect(ctrl.myStateData.tab).toBe('active');
    done();
  });
  $rootScope.$apply();
});

额外注意事项 #

• 务必确保测试中加载了ui.router模块和包含你路由配置的应用模块，否则$stateProvider的状态定义不会生效。
• 如果组件是通过路由直接挂载的（而非手动创建控制器），可以结合$compile编译组件模板，再触发$onInit，这样更贴近真实渲染场景。

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