first time asker here, so if you need further information to help me out please don’t hesitate to ask.

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);
});