使用全局 jQuery 对象的酶测试 Reactjs 组件

Question

我正在将 Reactjs 逐步集成到使用 HTML5 和 jQuery 构建的 Web 应用程序前端。我的反应组件使用全局 jQuery 对象（用于 AJAX 和一些动画），当反应组件 javascript 加载时可用。

现在，当我尝试 mount() 这个组件进行 Enzyme 测试时，出现以下错误

 ReferenceError: jQuery is not defined

如何使jQuery 对象可用于已安装的组件？

Testing a React component that uses jQuery & window object 是一个类似的问题，有 0 个答案...

如有必要，我愿意更新组件代码。

任何帮助将不胜感激。

编辑

我的组件的示例代码

  import React from 'react';

  export default class MySimpleComponent extends React.Component {

     constructor(props) {
        super(props);
     }

     componentDidMount() {
        var add_btn = this.refs.btn_add;
        (function ($) {
           $(add_btn).click(function (ev) {
              ev.preventDefault();
              console.log('button was clicked');
           });
        })(jQuery);
     }

     render() {
        return (
           <div className="wrap">
              <form action="/">
                 <input type="text" name="myinput" value="" />
                 <button className="button" ref="btn_add">New Record</button>
              </form>
           </div>
        );
     }
  }

Answer 1

好的，您可以使用jsdom 执行此操作。正如他们在自述文件中所说，您必须设置一些全局变量。只需添加global.jQuery = () => {}; 即可。

var jsdom = require('jsdom').jsdom;

global.document = jsdom('');
global.jQuery = () => {};
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

我还没有机会尝试上述方法。但是，我不建议将其作为可持续的解决方案。一个更好的方法是删除 jQuery。这是在没有它的情况下重构的组件。

  import React from 'react';

  export default class MySimpleComponent extends React.Component {

     constructor(props) {
        super(props);
     }

     clickHanlder(ev) {
       ev.preventDefault();
       console.log('button was clicked');
     }

     render() {
        return (
           <div className="wrap">
              <form action="/">
                 <input type="text" name="myinput" value="" />
                 <button className="button" onClick={this.clickHanlder}>New Record</button>
              </form>
           </div>
        );
     }
  }

如您所见，这并没有什么不同。您可以将事件处理程序直接附加到元素，对我来说，这可以让代码更易于阅读并查看操作在哪里。