Блог

Я пытаюсь создать тест для кнопки отправки, которая извлекает данные из созданной мной базы данных API. Я изо всех сил пытаюсь перевести ввод поддельного события в правильный формат для функции, которая запускается из моего списка событий. В настоящее время я получаю сообщение об ошибке «Ошибка типа: Не удается прочитать свойство «значение» неопределенного»

Это функция, которая вызывается при отправке формы, назначение-объект с ключом идентификатора и значением из атрибута value в HTML

 const selectDestination = (e) => {
    e.preventDefault();
    let form = document.querySelector('form');
    const destination =  {
        id: form.destination.value
        }
    console.log(destination)

    fetch(`http://localhost:3000/data/${destination.id}`)
    .then(r => r.json())
    .then(appendPrice)
    .catch(console.warn)

}
 

И он нацелен на этот HTML — код

 <form>
        <label for="event">Choose a destination</label>
        <select name="destination" id="destination">
        <option value="1">Paris</option>
        <option value="2">Stockholm</option>
        <option value="3">Munich</option>
        <option value="4">New York</option>
        <option value="5">Los Angeles</option>
    </select>
    <input  id = "submit" type="submit">
</form>
 

И это тот тест, который я пытаюсь провести с шуткой

 describe('submit event', () => {
        it('listens for event when submit button pressed', () => {
            const fakeE = {
                preventDefault: jest.fn(),
                    target: {
                       destination : { value: '1' },
                    }
                }
            app.selectDestination(fakeE)
            expect(app.selectDestination).toHaveBeenCalled();
        })
        
    })
 

Я уже некоторое время возился с синтаксисом и все еще не могу заставить его работать. Я думаю, что проблема как-то связана с тем, как я ориентируюсь на HTML, но я не уверен, как бы я это изменил. Любая помощь будет очень признательна.

Полный код находится на моем github здесь: https://github.com/qlanphere/travelDestinationPrices

Вы должны ориентироваться на выбранный ввод, а не на элемент формы. В запросе на извлечение вы также должны возвращать данные и работать с ними.

 const selectDestination = (e) => {
    e.preventDefault();
    let chooseDestination = document.querySelector('#destination');
    const destination =  {
        id: chooseDestination.value
        }
    console.log(destination)

    fetch(`http://localhost:3000/data/${destination.id}`)
    .then(r => r.json())
    .then(data => {
      // do something with data...
    }).catch(error => {
       console.log(error);
    })

}