Jasmine test for React дает ошибку и не запускает тесты

Question

Я только что начал кодирование с помощью React, и я сделал свою первую страницу, теперь хочу добавить тест для нее. Я использую Жасмин и карму для моего теста. Когда я пытаюсь запустить тест, я получаю ошибку:

TypeError: this.props.data is undefined 

Я искал в Интернете, и я ничего не могу найти, так что любая помощь будет очень ценна. Вы можете увидеть мой полный проект на моем github repo github.com/mrbgit/short-stories/tree/react-tests Спасибо!

Мой тестовый файл выглядит следующим образом:

var React = require('react/addons'); 
var Story = require('../../app/js/components/story.jsx'); 
var TestUtils = React.addons.TestUtils; 
var testUtilsAdditions = require('react-testutils-additions'); 
describe('Story component', function() { 
    var component; 
    afterEach(function() { 
     // if (component && testUtilsAdditions.isCompositeComponent(component) && component.isMounted()) { 
     // React.unmountComponentAtNode(component.getDOMNode().parent); 
     // } 
    }); 
    beforeEach(function() { 
     component = TestUtils.renderIntoDocument(React.createElement(Story)); 
     component.props.data.storyTitle = 'front end test title'; 
     component.props.data.author = 'front end author'; 
     component.props.data.storyText = 'front end story text'; 
     console.log('LLLLLLLLL', component); 
    }); 
    it('should display a story', function() { 
     expect(component.props.data).toBeDefined(); 
     expect(component.props.data.storyTitle).toBeDefined(); 
     expect(component.props.data.storyTitle).toBe('front end test title'); 
     expect(component.props.data.author).toBe('front end author'); 
     expect(component.props.data.storyText).toBe('front end story text') 
    }); 
}); 

Answer 1

Попробуйте

beforeEach(function() { 
    var element = React.createElement(Story); 
    element.props.data = { 
     storyTitle: 'front end test title', 
     author : 'front end author', 
     storyText : 'front end story text' 
    }; 
    component = TestUtils.renderIntoDocument(element); 
    console.log('LLLLLLLLL', component); 
}); 

Answer 2

Вам нужно пройти data объект в компонент при отображении его в DOM с помощью реакции тестирования утилиты. Это, как я обычно проверить мои компоненты:

var React = require('react'); 
var ReactAddons = require('react/addons').addons; 
var TestUtils = ReactAddons.TestUtils; 
var Story = require('../../app/js/components/story'); 
var expect = require('chai').expect; 

describe('<Story />', function() { 
    before(function() { 

    // Mock data. 
    this.storyData = { 
     author: 'Test Author', 
     storyTitle: 'Test title.', 
     storyText: 'This is a test story.' 
    }; 

    // Render component with mock data. 
    this.component = TestUtils.renderIntoDocument(
     <Story data={ this.storyData } /> 
    ); 
    }); 

    it('receives story data', function() { 
    var componentData = this.component.props.data; 

    expect(componentData).to.exist; 

    expect(componentData.storyTitle).exist; 
    expect(componentData.storyTitle).to.equal(this.storyData.storyTitle); 

    expect(componentData.author).to.exist; 
    expect(componentData.author).to.equal(this.storyData.author); 

    expect(componentData.storyText).to.exist; 
    expect(componentData.storyText)to.equal(this.storyData.storyText); 
    }); 
}); 

В моем примере я использую chaijs для утверждений.