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

1 Answer 1

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')