I am pletely new to React and jest. I have a react ponent with two date field also button which I want to test using jest frameworks. As I said I am pletely new in both React and jest if anyone can give an example I will really appreciate.

here is my ponent:

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;

I am pletely new to React and jest. I have a react ponent with two date field also button which I want to test using jest frameworks. As I said I am pletely new in both React and jest if anyone can give an example I will really appreciate.

here is my ponent:

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;

• javascript
• jestjs
• enzyme

Share Improve this question Follow edited Dec 6, 2018 at 21:17 Andreas Köberle 111k5858 gold badges280280 silver badges307307 bronze badges asked Dec 6, 2018 at 15:39 Rubel SarkerRubel Sarker 4911 gold badge11 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

So what you need to test is that you can enter values into the DayPicker ponents and that onDateChange is called with the values you have entered when the get submitted.

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

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


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