测试Jest中的React click事件失败，因为Jquery可以'；不能应用-我如何测试它？

我有一节这样的课

var React = require('react'),
    $ = require('jquery'),
    AccordionStep = require('./accordion-step');

var Accordion = React.createClass({

  toggleFooter: function(e) {
    var $target = $(e.target),
        $parent = $target.parents('.project-container');

    $target.toggleClass('up down');
    $parent.find('.project-accordion').toggleClass('active');
  },

  render: function() {
    return (
      <div>
        <ul className="project-accordion">
          {this.props.steps.map(function(step, i){
            return <AccordionStep step={step} key={i}/>
          })}
        </ul>
        <span className="footer-info">{this.props.completedSteps} of {this.props.totalSteps} steps completed</span>
        <span className="arrow down mt1" onClick={this.toggleFooter}></span>
      </div>
    )
  }
});

module.exports = Accordion;

var React=require（'React'），
$=require（'jquery'），
手风琴步=要求（'./手风琴步'）；
var Accordion=React.createClass({
切换页脚：函数（e）{
变量$target=$（即目标），
$parent=$target.parents（'.project container'）；
$target.toggleClass（“上下”）；
$parent.find（'.project accordion'）.toggleClass（'active'）；
},
render:function（）{
返回(

{this.props.steps.map（函数（步骤，i）{
返回
})}

{this.props.completedSteps}其中{this.props.totalSteps}个步骤已完成
)
}
});
module.exports=手风琴；

我还有一个Jest测试文件，它检查单击箭头时是否正确切换了类

jest.dontMock('../../../dashboard/projects/accordion')
    .dontMock('../../fixtures/projects.fixtures')
    .dontMock('jquery');

describe('Accordion', function() {
  var $ = require('jquery'),
      React = require('react/addons'),
      Accordion = require('../../../dashboard/projects/accordion'),
      AccordionStep = require('../../../dashboard/projects/accordion-step'),
      ProjectFixtures = require('../../fixtures/projects.fixtures'),
      TestUtils = React.addons.TestUtils;

  describe('render', function() {
    var accordion,
        projectFixtures = ProjectFixtures().projects[0],
        steps = projectFixtures.steps;

    beforeEach(function() {
      accordion = TestUtils.renderIntoDocument(
        <div className="project-container">
          <Accordion steps={steps} 
                     completedSteps={projectFixtures.completedSteps} 
                     totalSteps={projectFixtures.totalSteps} />
        </div>
      );
    });

    describe('clicking the arrow icon', function(){
      var arrow;

      beforeEach(function() {
        arrow = TestUtils.findRenderedDOMComponentWithClass(accordion, 'arrow');
      });

      it('should change the arrow to point up when it was clicked', function() {
        TestUtils.Simulate.click(arrow);

        expect(arrow.props.className).toEqual('arrow up mt1');
      });

    });

  });

});

jest.dontMock（'../../../dashboard/projects/accordion'）
.dontMock（“../../fixtures/projects.fixtures”）
.dontMock（“jquery”）；
描述（'手风琴'，功能（）{
var$=require（'jquery'），
React=require（'React/addons'），
Accordion=require（'../../../dashboard/projects/Accordion'），
AccordionStep=require（'../../../dashboard/projects/AccordionStep'），
ProjectFixtures=require（'../../fixtures/projects.fixtures'），
TestUtils=React.addons.TestUtils；
描述（'render'，function（））{
手风琴，
projectFixtures=projectFixtures（）。项目[0]，
步骤=projectFixtures.steps；
beforeach（函数（）{
accordion=TestUtils.renderIntoDocument(
);
});
描述（'单击箭头图标'，函数（））{
var-arrow；
beforeach（函数（）{
arrow=TestUtils.findRenderedomComponentWithClass（手风琴，“arrow”）；
});
它（'单击时应将箭头更改为指向上'，函数（）{
TestUtils.Simulate.click（箭头）；
expect（arrow.props.className）.toEqual（'arrow-up-mt1'）；
});
});
});
});

现在我已经在控制台上记录了toggleFooter函数中发生的事情，我知道该函数工作正常。类被切换，但测试仍然失败

你知道如何测试按钮的性能吗？我认为问题与测试如何实际呈现测试DOM有关。我曾尝试使用jQuery断言类被正确地切换，但这也不起作用（我假设是因为上述原因）

---

任何帮助都将不胜感激

您正在通过

$target.toggleClass（'up-down'）直接编辑
.arrow
dom节点的
className
属性，但不是生成它的组件的道具

在代码中，
arrow
是一个组件，而不是DOM节点。要查找ReactComponent的DOM节点，请使用
React.findDOMNode（组件）

React方法是放弃jQuery来完成这样一个琐碎的任务，而是使用一个标志来更新组件状态，该标志指示accordio是否处于活动状态

getInitialState: function() {
  return {
    accordionActive: false
  };
},

toggleFooter: function(e) {
  this.setState({
    accordionActive: !this.state.accordionActive
  });
},

render: function() {
  return (
    <div>
      <ul className={'project-accordion' + (this.state.accordionActive ? ' active' : '')}>
        {this.props.steps.map(function(step, i){
          return <AccordionStep step={step} key={i}/>
        })}
      </ul>
      <span className="footer-info">{this.props.completedSteps} of {this.props.totalSteps} steps completed</span>
      <span className={'arrow mt1 ' + (this.state.accordionActive ? 'up' : 'down')} onClick={this.toggleFooter}></span>
    </div>
  );
}

及

arrow.props.className
的值应始终为
arrow mt1 up
或
arrow mt1 down
这是一个很好的解决方案，也是一种很好的反应方式！非常感谢你为我指路；）真的很受欢迎，工作起来很有魅力。再见jQuery，你好。
className={classNames('project-accordion', this.state.accordionActive && 'active')}

className={classNames('arrow mt1', this.state.accordionActive ? 'up' : 'down')}