Javascript React的茉莉花试验给出了错误且不'；t运行测试

我刚刚开始用React编写代码，我已经完成了我的第一页，现在我想为它添加一个测试。我用茉莉花和因果报应做测试。当我尝试运行测试时，我得到错误：

TypeError: this.props.data is undefined

我在网上搜索过，但什么也找不到，所以我非常感谢你的帮助。你可以在我的github回购上看到我的完整项目，谢谢

我的测试文件如下所示：

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')
    });
});

试试这个

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);
});

---

使用react test utils将

数据

对象呈现到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);
  });
});

var React=require（'React'）；
var ReactAddons=require（'react/addons'）。addons；
var TestUtils=ReactAddons.TestUtils；
var Story=require（'../../app/js/components/Story'）；
var expect=需要（'chai'）。expect；
描述（“”，功能（）{
前（函数（）{
//模拟数据。
this.storyData={
作者：'测试作者'，
故事标题：“测试标题”，
故事文本：“这是一个测试故事。”
};
//使用模拟数据呈现组件。
this.component=TestUtils.renderIntoDocument(
);
});
它（'接收故事数据'，函数（）{
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）为.equal（this.storyData.storyText）；
});
});

---

在我的示例中，我使用的是断言。

感谢您如此迅速地回复我。我尝试了你的建议，但现在我得到了错误：

TypeError:element.props.data未定义

@cascadijs也许应该明确定义

数据

，就像更新的回答一样感谢Kirill Slatin修复了它！