javascript - karma -Jquery : How to Get Client Side Jquery Code to Work in Karma Tests?

Question

我有一个问题，我似乎找不到解决方案。

我有一个 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 在正确的上下文中被调用，以便它可以实际看到它应该选择的节点吗？我从搜索中发现的任何东西似乎都无法解决这个问题。

Answer 1

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

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

如果您想正确测试这段代码，您不应该尝试进行端到端测试。不要在测试中编写复杂的场景。例如:

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

测试#2: 选中“点击时应调用方法隐藏”

测试#3: 检查“函数隐藏应该调用一些 jQuery 方法”

您将更快地获得结果，并且测试将更有支持性