时间戳

首页 > 解决方案 > 如何对使用 Jest 和 Enzyme 调用的 jquery 进行单元测试？

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

问题描述

我们在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、Enzyme 和其他相关技术对这种方法进行单元测试？

标签： javascriptjqueryreactjsjestjsenzyme

解决方案

我建议这个没有 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()}
  ...
}

推荐阅读