使用 jest 的 ReactJS 测试组件方法

Question

尝试向 React 组件的 onChange 事件发送文本，我该如何模拟该事件？

我一直收到错误 对象没有方法 onSavecare，我如何访问该方法并测试它？

谢谢

组件：

var React = require("react");
var InlineSelect = React.createClass({

getInitialState: function () {
    return {
        isEditing: false,
        newValue: '',
        value: this.props.value
    };
},

toggleEdit: function () {
    this.setState({isEditing: !this.state.isEditing});
},

getOptions: function () {
    return this.props.renderProps.data.map(function (item) {
        return <option key={item.value} value={item.value}>{item.label}</option>;
    }.bind(this));
},

onChange: function(event) {
    var newValue = event.nativeEvent.target.text;

    this.props.renderProps.onSaveCare(newValue);
    this.setState({value: newValue});
    this.toggleEdit();
},

render: function () {

    if (this.state.isEditing) {
        return (
            <form className="pure-form">
                <select value="" ref="selectMark" className="mark-selector" onChange={this.onChange}>
                    {this.getOptions()}
                </select>
            </form>
        );
    }

    return (
        <div className="mark-editor" onClick={this.toggleEdit}>
            <a href="#">{this.state.value}</a>
        </div>
    );

    }
});

module.exports = InlineSelect;

这是我的测试：

jest.dontMock('../InlineSelect.js');

describe('Display options in select list', function() {

var React = require('react/addons'),  
InlineSelect = require('../InlineSelect.js'),
TestUtils = React.addons.TestUtils;

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
};

var component = TestUtils.renderIntoDocument(<InlineSelect renderProps=  {renderProps}  />);
var markEditor = TestUtils.findRenderedDOMComponentWithClass(component, 'mark-editor');
TestUtils.Simulate.click(markEditor);
var list = TestUtils.findRenderedDOMComponentWithTag(component, 'select');

it('has two options', function() {
  expect(list.props.children.length).toEqual(2);
});

it('adds it to the selected items', function() {
  TestUtils.Simulate.change 
    TestUtils.Simulate.change(list);
    expect(TestUtils.state.selectedItems.length).toEqual(1);
});`

Answer 1

您没有在测试中将密钥 onSaveCare 传递给 renderProps

在您使用的测试中：

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
};

但是在组件中你在 renderProps 上调用了 onSaveCare

this.props.renderProps.onSaveCare(newValue);

你需要将 onSaveCare 添加到 renderProps

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
  onSaveCare: jest.genMockFunction()
};

使用 jest 的 ReactJS 测试组件方法

ReactJS testing component method using jest

reactjs

jestjs