Karma - Jquery：如何让客户端 Jquery 代码在 Karma 测试中工作？答案

【问题标题】：Karma - Jquery: How to Get Client Side Jquery Code to Work in Karma Tests?Karma - Jquery：如何让客户端 Jquery 代码在 Karma 测试中工作？
【发布时间】：2016-12-28 03:01:08
【问题描述】：

我有一个问题似乎没有我能找到的解决方案。

我有一个 react 组件，它使用 jquery 根据点击事件更改某些 DOM 节点的类，如下所示（简化版）：

hide() {
  if ($('.hidecontrols').hasClass('fa-arrow-left')) {
    //hide UI
    $('.hidecontrols').removeClass('fa-arrow-left');
    $('.hidecontrols').addClass('fa-arrow-right');
  } else {
    //show UI
    $('.hidecontrols').removeClass('fa-arrow-right');
    $('.hidecontrols').addClass('fa-arrow-left');
  }
}
render() {
  return (
    <div>
      <i onClick={this.hide} className="hidecontrols fa fa-2x fa-arrow-left" aria-hidden="true"/>
    </div>
  );
}

当我在浏览器中测试代码时，它运行良好。当我用这个测试运行 Karma 时：

it('should HIDE when the hide-arrow is clicked', () => {
  var store = configure({});
  var provider = ReactTestUtils.renderIntoDocument(
    <Provider store={store}><Controls/></Provider>
  );

  var controls = ReactTestUtils.scryRenderedComponentsWithType(provider, Controls)[0];
  var hideArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(controls, 'fa-arrow-left')[0];

  ReactTestUtils
    .Simulate
    .click(hideArrow);

  var unHideArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(controls, 'fa-arrow-right')[0];

  expect(unHideArrow).toExist();
});

测试失败。 this.hide() 是在模拟点击时调用的，但是

if($('.hidecontrols').hasClass('fa-arrow-left'))

失败，因为 jquery 看不到 renderIntoDocument 渲染的任何元素。

长话短说，jquery 是在 Karma 浏览器的全局上下文中调用的（我使用的是 chrome，这并不重要），而不是在我的 React 组件渲染的任何上下文中。

任何想法如何让 jquery 在正确的上下文中被调用，以便它可以实际看到它应该选择的节点？我从搜索中找到的任何东西似乎都无法解决这个问题。

【问题讨论】：

标签： javascript jquery reactjs testing karma-runner

【解决方案1】：

如果你想避免测试失败，你应该模拟 jQuery。

spyOn(window, 'jQuery').returns($('<div>'))
spyOn(jQuery.fn, 'hasClass').returns({something})

如果你想正确地测试这段代码，你应该t try to make end to end testing. Dont 在你的测试中编写复杂的场景。例如：

测试#1：检查“...应该创建对象”

测试#2：勾选“点击时应该调用隐藏方法”

测试#3：勾选“函数隐藏应该调用一些jQuery方法”

您将更快获得结果，测试将更受支持

【讨论】：