Enzymtest Reactjs Komponente, die globale jQuery-Objekt verwendet

Question

Ich integriere Reactjs inkrementell in eine Web-App-Frontend mit HTML5 und jQuery gebaut. Meine Reaktionskomponente verwendet ein globales jQuery-Objekt (für AJAX und einige Animationen hier und dort), das verfügbar wäre, wenn die Komponente javascript geladen wird.

Nun, wenn ich zu mount() diese Komponente für das Testen mit Enzyme versuchen, erhalten sie folgende Fehler

ReferenceError: jQuery is not defined 

Wie kann ich jQuery Objekt zur Verfügung für die montierende Bauteil zu machen?

Testing a React component that uses jQuery & window object ist eine ähnliche Frage mit 0 Antworten ...

Ich bin bereit, den Komponentencode bei Bedarf zu aktualisieren.

JEDE Hilfe würde sehr geschätzt werden.

bearbeiten

Beispielcode meiner Komponente

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

Okay, so könnten Sie in der Lage sein, dies mit jsdom zu tun. Sie müssen einige Globals einrichten, wie sie in der Readme-Datei sagen. Fügen Sie einfach global.jQuery =() => {}; hinzu.

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' 
}; 

Ich hatte keine Chance, das oben genannte auszuprobieren. Ich würde dies jedoch nicht als nachhaltige Lösung empfehlen. Ein viel besserer Ansatz wäre es, jQuery zu löschen. Hier ist Ihre Komponente ohne sie refaktoriert.

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> 
     ); 
    } 
    } 

Wie Sie sehen können, ist es nicht so anders. Sie können die Event-Handler direkt an die Elemente anhängen, das macht den Code für mich leichter lesbar und sieht sozusagen, wo die Aktion ist.