Karma - jquery:如何让客户端jquery代码在Karma测试中工作?

Question

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

我有一个反应组件，它使用 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>
);
}

当我在浏览器中测试它时，代码工作正常。 当我用这个测试运行业力时：

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})

如果要正确测试此代码，则t try to make end to end testing. Don不应在测试中编写复杂的方案。例如：

测试#1： 检查"...应该创建对象">

测试#2： 选中"单击时应调用方法隐藏">

测试#3： 选中"函数隐藏应该调用一些jQuery方法">

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