如何對用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()}
  ...
}