[Solved]-Testing React click event in Jest fails because the Jquery can't be applied - How can I test it?-Reactjs

You are editing the className attribute of the .arrow dom node directly via $target.toggleClass('up down');, but not the props of the ReactComponent that spawned it.

In your code, arrow is a ReactComponent, not a DOM Node. To find the DOM Node of a ReactComponent, use React.findDOMNode(component).

The React way would be to ditch jQuery for such a trivial task and instead update your component state with a flag that indicates if the accordion is active.

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

Using the classNames module, you can replace those ugly className computation with

className={classNames('project-accordion', this.state.accordionActive && 'active')}

and

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

The value of arrow.props.className should then always be either arrow mt1 up or arrow mt1 down.