효소 테스트 글로벌 jQuery 개체를 사용하는 Reactjs 구성 요소

Question

Reactjs를 HTML5 및 jQuery로 작성된 웹 앱 프론트 엔드에 증분 통합합니다. 내 반응 구성 요소는 반응 구성 요소 javascript가로드 될 때 사용할 수있는 전역 jQuery 개체 (AJAX 및 일부 애니메이션의 경우 여기 저기에)를 사용합니다. 내가 mount()에 효소와 테스트를 위해이 구성 요소를하려고 할 때

지금,

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이 작업을 수행 할 수있을 수 있도록. 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> 
     ); 
    } 
    } 

자세히 알 수 있듯이 그렇게 다르지 않습니다. 이벤트 처리기를 요소에 직접 연결할 수 있습니다.이 기능을 사용하면 코드를 읽기 쉽고 작업의 위치를 ​​볼 수 있습니다.