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

I have a problem that seems to have no solution that I can find.

I have a react component that uses jquery to change the classes of some DOM nodes based on a click event, like so (simplified version):

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

The code works fine when I test it in a browser. When I run Karma with this test:

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

the test fails. this.hide() IS called on the simulated click, but the

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

failed because jquery cannot see any of the elements rendered by renderIntoDocument.

Long story short, jquery is being called on the global context of Karma's browser (I'm using chrome, not that it matters) and not in whatver context my React component has been rendered.

Any ideas how to get jquery to be called in the correct context so it can actually see the nodes it's supposed to select? Nothing I've found from searching seems to deal with this problem.