Невозможно прочитать свойство объекта состояния при тестировании компонента React, который отображает переменную состояния в рендере

Я пытаюсь протестировать компонент, который имеет значение из объекта состояния, отображаемого в нем render ().

Я упростил рассматриваемый компонент до этого простого тестового компонента для воспроизведения. Я использую React 0.12.2.

Я заполняю свой «отчет» при getIntitialState's вызове getStateFromStores(). Хотя при тестировании это значение пусто, и я думаю, что это приводит к ошибке.

Конечно, условная проверка, чтобы увидеть, определено ли this.state.report, будет работать, но кажется немного сложным помещать условные обозначения для всех переменных, напечатанных в render(), которые заполняются через состояние.

Тестовый компонент

var React = require('react');
var AppStore = require('../stores/AppStore');

function getStateFromStores() {
  return {
    report: AppStore.getCurrentReport(),
  };
}

var Test = React.createClass({

  getInitialState: function() {
    return getStateFromStores();
  },

  render: function(){
    return (
       <div>
        // This call to the report.id on state seems to be the issue
        {this.state.report.id}
      </div>
    );
  }

});

module.exports = Test;

Тест

jest.dontMock('../Test');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Test = require('../Test');

describe("Test", function() {

  it("should render Test", function() {
    var test = TestUtils.renderIntoDocument(<Test />);
    expect(test).toBeDefined();
  });

});

В идеале я хотел бы предварительно заполнить состояние компонента до того, как renderIntoDocument() будет вызван в тесте, поскольку именно там он дает сбой.

Я получаю этот сбой:

● Test › it should render Test
- TypeError: Cannot read property 'id' of undefined
    at React.createClass.render            (/Users/kevinold/_development/app/assets/javascripts/_app/components/Test.jsx:20:26)
    at ReactCompositeComponentMixin._renderValidatedComponent     (/Users/kevinold/_development/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
    at wrapper [as _renderValidatedComponent] (/Users/kevinold/_development/node_modules/react/lib/ReactPerf.js:50:21)
    at ReactCompositeComponentMixin.mountComponent (/Users/kevinold/_development/node_modules/react/lib/ReactCompositeComponent.js:802:14)
    at wrapper [as mountComponent] (/Users/kevinold/_development/node_modules/react/lib/ReactPerf.js:50:21)
    at ReactComponent.Mixin._mountComponentIntoNode (/Users/kevinold/_development/node_modules/react/lib/ReactComponent.js:405:25)
    at ReactReconcileTransaction.Mixin.perform (/Users/kevinold/_development/node_modules/react/lib/Transaction.js:134:20)
    at ReactComponent.Mixin.mountComponentIntoNode (/Users/kevinold/_development/node_modules/react/lib/ReactComponent.js:381:19)
    at Object.ReactMount._renderNewRootComponent (/Users/kevinold/_development/node_modules/react/lib/ReactMount.js:312:25)
    at Object.wrapper [as _renderNewRootComponent] (/Users/kevinold/_development/node_modules/react/lib/ReactPerf.js:50:21)
    at Object.ReactMount.render (/Users/kevinold/_development/node_modules/react/lib/ReactMount.js:381:32)
    at Object.wrapper [as render] (/Users/kevinold/_development/node_modules/react/lib/ReactPerf.js:50:21)
    at Object.ReactTestUtils.renderIntoDocument (/Users/kevinold/_development/node_modules/react/lib/ReactTestUtils.js:48:18)
    at Spec.<anonymous> (/Users/kevinold/_development/app/assets/javascripts/_app/components/__tests__/Test-test.js:9:26)
    at jasmine.Block.execute (/Users/kevinold/_development/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
    at jasmine.Queue.next_   (/Users/kevinold/_development/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
    at null._onTimeout (/Users/kevinold/_development/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)

Я не уверен, как предварительно загрузить состояние для этого компонента, которое должно решить проблему, до вызова renderIntoDocument() в моем тесте.

Я также подумывал о том, чтобы издеваться над getIntitialState() для этого компонента, но должен быть способ получше.

Есть идеи, как это проверить?


reactjs jestjs
person Kevin Old    schedule 26.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В итоге я решил эту проблему, высмеяв метод AppStore.getCurrentReport() следующим образом:

jest.dontMock('../Test');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Test = require('../Test');
var AppStore = require('../stores/AppStore');

describe("Test", function() {

  it("should render Test", function() {
    // Mock the return value from the method in the store that populates the value in getInitialState()
    AppStore.getCurrentReport.mockReturnValue({id: 1, title: 'Test Rpt'});

    var test = TestUtils.renderIntoDocument(<Test />);
    expect(test).toBeDefined();
  });

});
person Kevin Old    schedule 27.02.2015