エンザイムテストグローバルなjQueryオブジェクトを使用するReactjsコンポーネント

Question

私はReactjをHTML5とjQueryで構築されたWebアプリケーションフロントエンドに段階的に統合しています。私の反応コンポーネントは、反応コンポーネントのJavaScriptが読み込まれたときに利用可能なグローバルjQueryオブジェクト（AJAXといくつかのアニメーション用）を使用します。私は、酵素とテストのためmount()に、このコンポーネントをしようとすると、

今、それは私が実装部品用jQueryオブジェクトを利用できるようにするにはどうすればよい次のエラー

ReferenceError: jQuery is not defined 

を取得しますか？

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でこれを行うことができるかもしれないので。 readmeにあるように、いくつかのグローバルをセットアップする必要があります。 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> 
     ); 
    } 
    } 

ご覧のとおり、それほど違いはありません。イベントハンドラを要素に直接アタッチすることができます。これにより、コードが読みやすくなり、アクションがどこにあるかがわかります。