如何測試接收事件的函數？

創建測試對我來說是新的。我正在嘗試爲接收事件的函數創建一個測試。這是一個onChange呼叫，如果它很重要，我使用chai。如何測試接收事件的函數？

我的功能：

export function handleChange(event) { 
    if (isNaN(event.target.value)) { 
    event.preventDefault(); 
    alert('input can only be a number'); 

    } else if (event.target.value > 5) { 
    event.preventDefault(); 
    alert('Rating can not be over 5 stars, please try again'); 

    } else { 
    this.setState({starRate: event.target.value}); 
    }

來源

2017-08-16 Avishay Pelach

首先，你申請event.preventDefault()到輸入。在這種情況下沒有「事件」來阻止，所以代碼本質上是無用的。

其次，您正在使用event.target.value，當只有event傳遞到您的函數。在這種情況下，您只需要尋找event.value。

要通過當前輸入，只需將this作爲參數傳入JavaScript函數。 this總是指當前元素。

這裏有一個工作示例：

function handleChange(event) { 
 
    if (isNaN(event.value)) { 
 
    alert('The input can only be a number.'); 
 
    } else if (event.value > 5) { 
 
    alert('Rating can not be over 5 stars, please try again.'); 
 
    } else { 
 
    alert('The input was OK.'); 
 
    } 
 
}

<input onchange="handleChange(this)">

當你輸入的輸入（然後嘗試單擊關閉輸入的），一個alert()將被拋出。

希望這會有所幫助！ :)

來源

2017-08-16 01:29:38

嘿感謝您的回答:) 你是對的event.preventDefault（），不需要它。如果我失去'event.target.value'中的'target'，我根本就沒有從輸入中獲取事件值。我正在尋找一個答案，可以幫助我測試該功能並在發生時模擬事件。 –

如果確實需要'event.target.value'，那麼您必須向父級添加點擊處理程序，然後進行委派。這是一種不尋常的方法，儘管沒有理由不能用我的代碼替代上述代碼。你想爲此事模擬什麼「事件」？當輸入被點擊時，您已經觸發了邏輯。你是否想要提交表單？你可以使用'.submit（）'。 –

無論您是否使用委託事件處理程序，'event'對象都具有'.target'屬性。 'event'對象沒有'.value'屬性。 – nnnnnn

如何測試接收事件的函數？

回答

相關問題