方法"props"只能在单个节点上运行.在SingleDatePicker中找到了0

Question

我正试图用酶来测试这个方法，但却出现了这个错误。

● should set calender to focused
Method “props” is only meant to be run on a single node. 0 found instead.
86 |     const focused = true;
87 |     const wrapper = shallow(<ExpenseForm expense={expenses[0]} />);
> 88 |     wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });
|                                      ^
89 |     expect(wrapper.state('calenderFocused')).toBe(focused);
90 | });

我正在尝试测试其方法的组件文件。我正在尝试测试SingleDatePicker 的方法

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/initialize';

export default class ExpenseForm extends React.Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
description: props.expense ? props.expense.description : "",
note: props.expense ? props.expense.note : "",
amount: props.expense ? (props.expense.amount / 100).toString() : "",
createdAt: props.expense ? moment(props.expense.createdAt) : moment(),
calenderFocused: false,
error: ""
};
}
onDescriptionChange = (e) => {
const description = e.target.value;
this.setState(() => ({ description }));
}
onNoteChange = (e) => {
const note = e.target.value;
this.setState(() => ({ note }));
}
onAmountChange = (e) => {
const amount = e.target.value;
if (!amount || amount.match(/^d{1,}(.d{0,2})?$/)) {
this.setState(() => ({ amount }))
}
}
onDateChange = (createdAt) => {
if (createdAt)
this.setState(() => ({ createdAt }));
};
onFocusChange = ({ focused }) => {
this.setState(() => ({ focused }));
};
onSubmit = (e) => {
e.preventDefault();
if (!this.state.description || !this.state.amount) {
//Error
this.setState(() => ({ error: "Please provide description and amount" }));
} else {
//Clear error
this.setState(() => ({ error: "" }));
this.props.onSubmit({
description: this.state.description,
amount: parseFloat(this.state.amount, 10) * 100,
createdAt: this.state.createdAt.valueOf(),
note: this.state.note
});
}
};
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input
type="text"
placeholder="Description"
autoFocus
value={this.state.description}
onChange={this.onDescriptionChange} />
<input
type="text"
placeholder="amount"
value={this.state.amount}
onChange={this.onAmountChange} />
<SingleDatePicker
date={this.state.createdAt}
onDateChange={this.onDateChange}
focused={this.state.focused}
onFocusChange={this.onFocusChange}
numberOfMonths={1}
isOutsideRange={(day) => false}
/>
<textarea
placeholder="Add note for your expense"
value={this.state.note}
onChange={this.onNoteChange}
></textarea>
{!!this.state.error && <p>{this.state.error}</p>}
<button>Add expense</button>
</form>
</div>
)
}
}

这是我遇到错误的两个测试用例。两个测试用例都有相同的错误。找不到SingleDatePicker。

test("should set date change", () => {
const now = moment();
const wrapper = shallow(<ExpenseForm />);
wrapper.find('SingleDatePicker').prop('onDateChange')(now);
expect(wrapper.state('createdAt')).toEqual(now);
});
test("should set calender to focused", () => {
const focused = true;
const wrapper = shallow(<ExpenseForm />);
wrapper.find('SingleDatePicker').prop('onFocusChange')({ focused });
expect(wrapper.state('calenderFocused')).toBe(focused);
});

Answer 1

需要向find提供组件，而不是字符串。组件的name和displayName属性与它在JSX中的命名方式无关。否则，Enzyme无法将组件连接到其预期名称。

文件中提到：

React组件名称和道具(Button、Button〔type＝"submit〕等(-但是，请注意，强烈建议按组件构造函数/函数查找，而不是按显示名称查找。

应该是：

wrapper.find(SingleDatePicker).prop('onFocusChange')({ focused });