Как проверить компонент выбора даты в шутку

Question

Я совершенно новичок в Реакте и шутках.У меня есть компонент реагирования с двумя полями даты и кнопкой, которую я хочу протестировать с помощью Jest Framework.Как я уже сказал, я абсолютно новичок и в React, и в шутке, если кто-нибудь может привести пример, который я буду очень признателен.

вот мой компонент:

import React, { Component } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Col, Form, FormGroup, Label, Input, Button, } from 'reactstrap';

class Aquaculturedatepicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dateFrom: '',
      dateTo: '',
      loading: false,
    };
  }

  handleFirstDayChange = (dateFrom) => {
    this.setState({ dateFrom });

  }

  handleSecondDayChange = (dateTo) => {
    this.setState({ dateTo });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const dateFrom = this.state.dateFrom
    const dateTo = this.state.dateTo
    this.setState({ loading: true })
    this.props.onDateChange(dateFrom, dateTo);
  }

  render() {
    // console.log('hello', this.state.dateFrom)
    // console.log('hello', this.state.dateTo)
    const { dateFrom, dateTo } = this.state;
    return (<Container className="Datepickerfrom" style={{ width: "1000px", paddingTop: "2px", paddingBottom: "60px" }}>
              <Form onSubmit={this.onSubmit.bind(this)} inline>
                  <Col>
                  <FormGroup>
                      <Label style={{ paddingRight: "5px", margin: "0.2", fontSize: "20px" }}>Date From</Label>
                      <DayPickerInput value={dateFrom} onDayChange={this.handleFirstDayChange} inputProps={{ required: false }} />
                  </FormGroup>
                  </Col>
                  <Col>
                  <FormGroup>
                      <Label style={{ paddingRight: "5px", margin: "0.2em", fontSize: "20px" }}>Date To</Label>
                      <DayPickerInput value={dateTo} onDayChange={this.handleSecondDayChange} inputProps={{ required: false }} />
                  </FormGroup>
                  </Col>
                  <Button className="btn-lg btn-primary" style={{ padding: "6px", margin: "0.2em", fontSize: "20px", backgroundColor: "#008CBA", border: "none" }}>
                      <i className="far fa-calendar-alt"></i> Submit
                  </Button>
              </Form>
          </Container>)
  }
}
export default Aquaculturedatepicker;

Answer 1

Итак, вам нужно проверить, что вы можете вводить значения в DayPicker компоненты и что onDateChange вызывается со значениями, которые вы ввели при получении.

const onDateChange = jest.fn()
const component = shallow(<Aquaculturedatepicker onDateChange={onDateChange} />) 

const dayPickers = component.find('DayPickerInput')
dayPickers.at(0).prop('onDayChange')('date1')
dayPickers.at(1).prop('onDayChange')('date2')


component.find('Form').simulate('submit')
expect(onDateChange).toHaveBeenCalledWith('date1', 'date2')