I need to get child component props. You could ask why don't I just test child component by itself- I need to do it because it is changing the state of the parent component. I am getting this error message - Method “props” is meant to be run on 1 node. 0 found instead.
I have tried both prop and props method, and a lot of stuff that is commented out in my code https://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html, which should work. What am I missing?
Test file:
import React from 'react';
import { shallow } from 'enzyme';
import moment from 'moment';
import ExpenseForm from '../../components/ExpenseForm';
import expenses from '../fixtures/expenses';
test('Should set new date on date change', () => {
const now = moment();
const wrapper = shallow(<ExpenseForm />);
// console.log(wrapper.find('<SingleDatePicker />').prop('id'));
// console.log(wrapper.find('SingleDatePicker').exists())
//expect(wrapper.find('SingleDatePicker').toBe(true);
// expect(wrapper.props()).toBe(true);
// wrapper.instance().onDateChange({moment});
// wrapper.update();
// wrapper.find('SingleDatePicker').props().onDateChange;
// wrapper.find('SingleDatePicker').props()
// expect(wrapper.find('SingleDatePicker').exists()).toBe(true)
// expect(wrapper.prop('SingleDatePicker').prop('onDateChange')).toBe(true)
// expect(wrapper.find('SingleDatePicker').exists()).toBeTruthy()
// expect(component.contains(<SingleDatePicker />)).toBe(false)
// wrapper.find('SingleDatePicker').prop('onDateChange');
// console.log(wrapper.find('SingleDatePicker'));
// expect(wrapper.state('createdAt')).toEqual(now);
wrapper.find('form').find('SingleDatePicker').prop('onDateChange');
});
Component file:
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);
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(),
calendarFocused: 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) => {
this.setState(() => ({ createdAt }));
};
onFocusChange = ({focused}) => {
this.setState(() => ({ calendarFocused: focused }));
};
onSubmit = (e) => {
e.preventDefault();
if (!this.state.description || !this.state.amount) {
this.setState(() => ({ error: 'Please provide description and amount.'}));
} else {
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>
{this.state.error && <p>{this.state.error}</p>}
<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} // momentPropTypes.momentObj or null
onDateChange={this.onDateChange} // PropTypes.func.isRequired
focused={this.state.calendarFocused} // PropTypes.bool
onFocusChange={this.onFocusChange} // PropTypes.func.isRequired
id="your_unique_id" // PropTypes.string.isRequired,
numberOfMonths={1}
isOutsideRange={() => false}
/>
<textarea
placeholder="Add a note for your expense (optional)"
note={this.state.note}
onChange={this.onNoteChange}
>
</textarea>
<button>Add Expense</button>
</form>
</div>
)
}
}
I need to access 'onDateChange' prop and pass it a value.
Aucun commentaire:
Enregistrer un commentaire