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

Question

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

Я упростил компонент, о котором идет речь, к этому простому тестовому компоненту для воспроизведения. Я использую React 0.12.2.

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

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

Test Component

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() для этого компонента, но должен быть лучший способ.

Любые идеи о том, как проверить это?

Answer 1

Я в конечном итоге решить это, насмешливый вне 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(); 
    }); 

});