Question

我在测试React组件时遇到了问题。该组件是我的应用程序的过滤器。有一个表单有两个输入字段，类型为date，您可以在其中设置“from”日期和“to”日期。我正在测试组件是否使用正确的参数调用prop。这是我的代码：

测试：

it('should call onFilterByDate when dates are provided', () => {
    var dateFrom = 1487548800000;
    var dateTo = 1487549900000;    
    var spy = expect.createSpy();
    var filterItem = TestUtils.renderIntoDocument(<FilterItem onFilterByDate={spy}/>);
    filterItem.setState({filterVisible: true});
    var $el = $(ReactDOM.findDOMNode(filterItem));

    filterItem.refs.fromDateFilter.valueAsNumber = dateFrom;
    filterItem.refs.toDateFilter.valueAsNumber = dateTo;    

    TestUtils.Simulate.submit($el.find('form')[0]);

    console.log(spy.calls[0].arguments);

    expect(spy).toHaveBeenCalledWith(moment(dateFrom).utc().unix(), moment(dateTo).utc().unix());
})

我将日期值作为数字传递给ValueAsNumber。它在之前的测试中有效。

组件：

class FilterItem extends Component {
    constructor(props) {
        super(props);

        this.state = {
            filterVisible: false
        };

        this.handleFilterByDate = this.handleFilterByDate.bind(this);            
        this.handleShowHideFilter = this.handleShowHideFilter.bind(this);
    }

    handleFilterByDate (e) {
        e.preventDefault();    
        var dateFrom = moment(this.refs.fromDateFilter.valueAsDate).unix();    
        var dateTo = moment(this.refs.toDateFilter.valueAsDate).unix();    
        this.props.onFilterByDate(dateFrom, dateTo);
    }

    handleShowHideFilter () {
        this.setState({
            filterVisible: !this.state.filterVisible
        });
    }

    var renderApp = () => {      
        if (firebase.auth().currentUser) {
            return (
            <div>
                <div className="row row-add-item box-material">
                <AddItem onAddItem={this.handleAddItem}/>              
                </div>
                <div className="row row-filter box-material">              
                <FilterItem onFilterByText={this.handleFilterByText} onFilterByDate={this.handleFilterByDate} />              
                </div>
                <div className="row row-items box-material">              
                <ItemList items={expenses} title={"Expenses"} totalValue={expenseTotal} onDelete={ this.handleDelete }/>
                <ItemList items={incomes} title={"Incomes"} totalValue={incomeTotal} onDelete={ this.handleDelete }/>              
                </div>
                <div className="row row-balance box-material">              
                <Balance expenseTotal={expenseTotal} incomeTotal={incomeTotal} />              
                </div>
            </div>
            )
        } else {
            return (
            <div className="row">
                <div className="columns small-centered medium-12 large-12">              
                <Login onGithubLogin={ this.handleGithubLogin } onGoogleLogin={ this.handleGoogleLogin } onLogout={ this.handleLogout }/>
                </div>
            </div>
            )
        }        
        }

        var renderLogout = () => {
        if (firebase.auth().currentUser) {
            return <a className="p-logout" onClick={this.handleLogout}>Logout</a>
        }
        } 

        return (
        <div>
            {renderLogout()}
            <h1 className="text-center">React Finance App</h1>
            {renderApp()}
        </div>
        )
    }
}

我删除了一些东西以使其更简单。问题是，当我运行测试时，它使用“fromDate”和“toDate”作为相同的值调用prop。经过一番挖掘，这似乎是问题所在，但我找不到解决方案：

filterItem.refs.fromDateFilter.valueAsNumber = dateFrom;
filterItem.refs.toDateFilter.valueAsNumber = dateTo;

这两行似乎正在将输入值更改为相同的值。在这种情况下，这是“dateFrom”变量的值。测试代码中的日志返回：

LOG: [1487548800, 1487548800]

有人可以帮忙吗？

React的问题 - 使用Karma和Expect

0 个答案: