First of all, here is the app code in question

Here are the variables in question

    const availability = [
        ['11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', "5:30 PM", '6:00 PM', '6:30 PM', '7:00 PM', '7:30 PM', '8:00 PM'],
        ['11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', "5:30 PM", '6:00 PM', '7:30 PM', '8:00 PM'],
        ['11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', "5:30 PM", '6:00 PM', '6:30 PM'],
        ['11:00 AM', '11:30 AM', '12:00 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', '6:30 PM', '7:00 PM', '7:30 PM', '8:00 PM'],
        ['1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '4:00 PM', '4:30 PM', '5:00 PM', "5:30 PM", '7:00 PM', '7:30 PM', '8:00 PM'],
        ['11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '5:00 PM', '6:00 PM', '6:30 PM', '7:00 PM', '7:30 PM', '8:00 PM'],
        ['4:00 PM', '4:30 PM', '5:00 PM', "5:30 PM", '6:00 PM']
    ];

    const dayOfWeek = new Date(formik.values.date).getDay();
    const availabilityForDay = availability[dayOfWeek];

The date comes from a React DatePicker component.

Below is the code for the select element that’s options change depending on the date selected. These two chunks are part of a form utilizing the useFormik hook

 <div className="dropdown time">
                        <label htmlFor='time'>Time</label>
                        <select
                            id='time'
                            name='time'
                            type="button"
                            className={formik.touched.time && formik.errors.time ? 'btn btn-secondary dropdown-toggle error' : "btn btn-secondary dropdown-toggle"}
                            aria-expanded="false"
                            value={formik.values.time}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            required
                        >
                            <option value='Select Time'>Select Time</option>
                            {availabilityForDay.map((time, index) => <option data-testid='time-option' className="dropdown-item" value={time} key={index}>{time}</option>)}
                        </select>
                    </div>

My problem is that when I test the length of the availability array depending on a selected day, no matter which date I plug in, Jest is returning the length of the array for TODAY’s date instead. The feature works when I interact with the page itself, but I am hoping someone can help me get the test to match that fact. The test I wrote is below:

test('time options are updating depending on the date selected', () => {
    render(<BookingForm />);

    const dateInput = screen.getByLabelText('Date');
    const timeSelection = screen.getByText('Select Time');
    let availability = screen.getAllByTestId('time-option');

    fireEvent.focus(dateInput, { target: { value: '09/30/2024' } });

    expect(dateInput).toHaveValue('09/30/2024');
    expect(timeSelection).toHaveValue('Select Time');
    expect(availability).toHaveLength(15);
});