Unit test: onChange function is called but the field value didn't change

Viewed 32

I'm writing a unit test by using jest and enzyme. All tests passed but the startDate and endDate returns an unchanged value, which is not expected.

My code:

    const { startDate, endDate, onChangeDateRange} = props

    const previousRange = () => {
        const difference = moment(endDate).diff(moment(startDate), 'days')
        onChangeDateRange({
            startDate: moment(startDate).subtract(difference + 1, 'days'),
            endDate: moment(endDate).subtract(difference + 1, 'days')
        })
    }

    const nextRange = () => {
        const difference = moment(endDate).diff(moment(startDate), 'days')
        onChangeDateRange({
            startDate: moment(startDate).add(difference + 1, 'days'),
            endDate: moment(endDate).add(difference + 1, 'days')
        })
    }

    const previousButton = (
        <Button tertiary onClick={previousRange}>
            <Row alignItems='center' gridGap={8}>
                <IconChevronLeft aria-hidden />
            </Row>
        </Button>
    )

    const nextButton = (
        <Button tertiary onClick={nextRange}>
            <Row alignItems='center' gridGap={8}>
                <IconChevronRight aria-hidden={true} />
            </Row>
        </Button>
    )

    return (
        <Row >
            {previousButton}
            {nextButton}
            <DateRangeCalendar
                startDate={startDate}
                endDate={endDate}
                onChangeDateRange={onChangeDateRange}
            />
        </Row>
    )
}

export default Date

My test code:

describe('Date Component', () => {
    let wrapper
    const onChangeDateRange = jest.fn()

    it('renders Date with Button, and DateRangeCalendar as child components', () => {
        wrapper = shallow(
            <Date
                onChangeDateRange={onChangeDateRange}
                startDate='2022-3-28'
                endDate='2022-3-29'
            />
        )
        expect(wrapper.length).toEqual(1)
        expect(wrapper.find('Row').length).toEqual(3)
        expect(wrapper.find('DateRangeCalendar').length).toEqual(1)
        expect(wrapper.find('Button').length).toEqual(2)
        expect(wrapper.find('Text').length).toEqual(1)
        expect(wrapper.find('Spacer').length).toEqual(2)
    })

    it('should call onChangeDateRange when clicking previousButton ', () => {
        wrapper = shallow(
            <Date
                onChangeDateRange={onChangeDateRange}
                startDate='2022-3-28'
                endDate='2022-3-29'
            />
        )
        const DateRangeCalendar = wrapper.find('DateRangeCalendar')
        wrapper.find('Button').at(0).simulate('click')
        expect(onChangeDateRange).toHaveBeenCalledTimes(1)
        expect(DateRangeCalendar.props().startDate).toEqual('2022-3-26')
        expect(DateRangeCalendar.props().endDate).toEqual('2022-3-27')
    })

    it('should call onChangeDateRange when clicking nextButton  ', () => {
        wrapper = shallow(
            <Date
                intl={intl}
                onChangeDateRange={onChangeDateRange}
                startDate='2022-3-28'
                endDate='2022-3-29'
            />
        )
        const DateRangeCalendar = wrapper.find('DateRangeCalendar')
        wrapper.find('Button').at(1).simulate('click')
        expect(onChangeDateRange).toHaveBeenCalled()
        expect(DateRangeCalendar.props().startDate).toEqual('2022-3-30')
        expect(DateRangeCalendar.props().endDate).toEqual('2022-3-31')
    })
})

When I run the test, the onChangeDateRange is called, but the value of startDate and endDate remain unchanged. It returns as startDate='2022-3-28' endDate='2022-3-29'. Why the value is not changed?

0 Answers
Related