如何对用Jest和Enzyme调用的jquery进行单元测试？

Question

我们在React Component didMount生命周期方法中涉及了jquery事件处理程序。

代码大致如下：

export default class Home extends Component {
    componentDidMount() {
        Usabilla("SMART_MODEM");

        $( ".option-label" ).parent().on( "click", function() {
            console.log(">>>>>>>> Click Happening.")
            let outerObject = this;

            $( ".selected" ).each(function() {
                if($(outerObject).text() !==  $(this).text()  ) {
                    $(this).click();
                }
            });
        });

         });
    }



    render() {
      // Some React Render Code Hre.
 }

}

我需要增加测试范围并测试$( ".option-label" ).parent(). 方法。

如何使用Jest，酶和其他相关技术对该方法进行单元测试？

Answer 1

我建议这种没有jQuery的纯React实现（不实现onClick的全部逻辑）。 因此，这很容易测试：

state = {
  labels: []  // filled with some async operation
}

handleLabelClick = () => {
  console.log(">>>>>>>> Click Happening.")
}

renderOptionLabels = () => (
  const { labels } = this.state;

  <ul>
    {labels.length && labels.map(label => (
      <li className="option-label" key={label.id} onClick={this.handleLabelClick}>{label.text}</li>
    ))}
  </ul>
)

render() {
  ...
  {this.renderOptionLabels()}
  ...
}