修改

Question

我正在将Reactjs逐步集成到使用HTML5和jQuery构建的Web应用程序前端。我的react组件使用全局jQuery对象（用于AJAX和一些动画），这些对象在加载react组件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>
        );
     }
  }

你可以看到它并没有那么不同。您可以将事件处理程序直接附加到元素上，对我而言，这使得代码更易于阅读并查看操作的位置，可以这么说。

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

修改

1 个答案: