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?