samedi 26 octobre 2019

Cannot find child component props

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