Почему TestUtils.Simulate.click в Jest не работает при использовании непосредственно в компонентах React?

Допустим, у меня есть 2 компонента. Родитель, содержащий ребенка.

Дочерний компонент - это такая кнопка:

var React = require('react');

var ChildButton = React.createClass({
  onSubmitAnswer: function(e) {
    this.props.onClick(this);
  },

  render: function() {
    return (
      <div className={this.props.visibility}>
          <button onClick={this.onSubmitAnswer}>Click Me</button>
      </div>
    )
  }

});

module.exports = ChildButton;

Он живет внутри своего родителя, который выглядит так:

var React = require('react'),
    ChildButton = require('./face-submit-button');

var ParentComponent = React.createClass({
  onButtonSubmit: function() {
    //Something happens here
  },

  render: function() {
    return (
      <div>
        //Some more components
        <ChildButton text="Submit" onClick={this.onButtonSubmit} />
      </div>
    )
  }

});

module.exports = ParentComponent;

Все идет нормально. В пользовательском интерфейсе все работает как положено. Но я столкнулся с некоторыми проблемами в тестах Jest с использованием TestUtils.Simulate.click ().

Мой тест для компонента ChildButton прост и ведет себя так, как я ожидал.

jest.dontMock('./child-button');

describe('ChildButton', function() {
  var React = require('react/addons'),
      ChildButton = require('./child-button'),
      TestUtils = React.addons.TestUtils;

  describe('events', function() {
    var button,
        onClickStub;

    beforeEach(function() {
      onClickStub = jest.genMockFn();

      button = TestUtils.renderIntoDocument(
        <ChildButton onClick={onClickStub} />
      );
    });

    it('should call onSubmitAnswer when the button is clicked', function() {
      var buttonTag = TestUtils.findRenderedDOMComponentWithTag(button, 'button');

      TestUtils.Simulate.click(buttonTag);

      expect(onClickStub).toBeCalled();
    });
  });
});

Мой тест на родительский компонент начинался так же:

jest.dontMock('./parent-component');

describe('ParentComponent', function() {
  var React = require('react/addons'),
      ParentComponent = require('./parent-component'),
      ChildButton = require('./child-button'),
      TestUtils = React.addons.TestUtils;

  describe('events', function() {
    var parent,
        onClickStub;

    beforeEach(function() {
      onClickStub = jest.genMockFn();

      parent = TestUtils.renderIntoDocument(
        <ParentComponent onClick={onClickStub} />
      );
    });

    it('should call onButtonSubmit when a click is triggered', function() {
      var childButton = TestUtils.findRenderedComponentWithType(parent, ChildButton);

      TestUtils.Simulate.click(childButton);

      expect(onClickStub).toBeCalled();
    });
  });
});

Но этот тест не проходит. Единственное различие, которое я вижу между этими двумя тестами, заключается в том, что один использует тег HTML напрямую и нажимает на него, а другой запускает щелчок по компоненту React. Могу ли я напрямую использовать событие click в компонентах React? Верно ли мое предположение?

И если да, то есть ли способ по-другому запускать щелчок по компонентам React в тестах? Я пробовал использовать SimulateNative, но это имело тот же эффект, onClickStub не вызывается при нажатии.


reactjs jestjs
person alengel    schedule 14.05.2015    source источник
comment
Похоже, имитация щелчка не доходит до родителя. Если вы имитируете щелчок по родительскому элементу вместо кнопки, он работает должным образом?   -  person Crob    schedule 14.05.2015
comment
Но я хочу проверить, работает ли щелчок по кнопке, а не по родительскому элементу, который может иметь много разных подкомпонентов. Я пробовал ваше предложение, но оно все равно не работает.   -  person alengel    schedule 14.05.2015
comment
Но родительский onClick должен происходить всякий раз, когда щелкается что-либо в родительском элементе, а не только childButton. Не уверен, что еще попробовать, если имитация щелчка по родительскому элементу не работает.   -  person Crob    schedule 14.05.2015
comment
Хм, я не уверен, что это предположение верно. Я пытаюсь проверить, что событие onClick на кнопке срабатывает и, в свою очередь, вызывает функцию onButtonSubmit. До сих пор я тестировал это так: у меня есть заглушка в этой функции, и я просто проверяю, что она вызывается. Но использование onClick для кнопки напрямую или сам родитель не запускает событие, поэтому я предполагаю, что, возможно, события onClick не работают с компонентами React и должен быть другой способ.   -  person alengel    schedule 14.05.2015
comment
Итак, поскольку onClick на самом деле не должен происходить ни при каком щелчке по родительскому элементу, почему бы не сделать что-то вроде ‹Parent submitFn = {stub} /› и не изменить функцию onButtonSubmit, чтобы она вызывала this.props.submitFn ().   -  person Crob    schedule 14.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

В настоящее время существует открытая ошибка для этой проблемы: Пусть ReactTestUtils.Simulate.click работает с компонентами, не относящимися к dom < / а>. Итак, ответ заключается в том, что из-за ошибок вы можете использовать Simulate.click только на реальном узле DOM. Таким образом, вы можете обойти ошибку, получая узел DOM, пока он не будет исправлен.

person Cymen    schedule 28.08.2015