Компонент Reactjs для тестирования ферментов, использующий глобальный объект jQuery

Я постепенно интегрирую Reactjs в интерфейс веб-приложения, созданный с помощью HTML5 и jQuery. Мой компонент реакции использует глобальный объект jQuery (для AJAX и некоторых анимаций здесь и там), который будет доступен при загрузке javascript компонента реакции.

Теперь, когда я пытаюсь mount() протестировать этот компонент с помощью Enzyme, появляется следующая ошибка

 ReferenceError: jQuery is not defined

Как сделать объект jQuery доступным для смонтированного компонента?

Тестирование компонента React, который использует jQuery и объект окна это аналогичный вопрос с 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>
        );
     }
  }

reactjs jquery enzyme
person Ejaz    schedule 02.03.2017    source источник
comment
Не могли бы вы опубликовать код компонента, пожалуйста   -  person spirift    schedule 02.03.2017
comment
@spirift Я добавил код   -  person Ejaz    schedule 03.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, возможно, вы сможете сделать это с помощью 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>
        );
     }
  }

Как видите, все не так уж и сложно. Вы можете прикрепить обработчики событий непосредственно к элементам, для меня это упрощает чтение кода и, так сказать, определение действия.

person spirift    schedule 06.03.2017
comment
Спасибо за Ваш ответ. Я фактически изменил небольшую часть своего компонента, чтобы использовать собственную обработку событий, и это устранило ошибку. Я думаю, что в конечном итоге я удалю весь код jQuery из своего компонента и попытаюсь включить какой-либо другой способ анимации элементов. Могут быть переходы CSS. - person Ejaz; 08.03.2017
comment
Ознакомьтесь с скоростью реакции или реагировать на движение - person spirift; 08.03.2017
comment
Что делает global.jQuery = () => {};? Похоже, вы устанавливаете jQuery на пустой объект, но почему? - person Randall Coding; 24.10.2019
comment
Он устанавливает jQuery как неработающую функцию или как бездействующую. Таким образом, когда тестируемый код вызывает jQuery, НЕ выдает ошибку о том, что jQuery не является функцией. - person spirift; 21.11.2019