下面是我的腳本：
export interface InputProps {
value: string;
onSubmit: (value: string) => void;
onChange: (value: string) => void;
}
const InputBox: React.FC<InputProps> = (props: InputProps) => {
return (
<InputWrapper>
<InputField
value={props.value}
onSubmit={() => {
props.onSubmit;
console.log('onsubmit function is being called.');
}}
onChange={props.onChange}
button={true}
/>
</InputWrapper>
);
};
下面是我的測驗：
describe('<InputBox />', () => {
const onSubmitMock = jest.fn();
const onChangeMock = jest.fn();
const Test = <InputBox onSubmit={onSubmitMock} onChange={onChangeMock} value="test" />;
it('called onSubmitMock when click submit', () => {
const { getAllByRole } = render(Test);
fireEvent.click(getAllByRole('button'));
expect(onSubmitMock).toHaveBeenCalled();
});
但它給了我錯誤：通話次數：0
但是，我的 onChange 測驗通過了：
it('called onChangeMock when click submit', () => {
const { getAllByRole } = render(Test);
fireEvent.click(getAllByRole('button'));
expect(onChangeMock).toHaveBeenCalled();
});
b/t onChange 和 onSubmit 的唯一區別是我有一個用于 onSubmit 屬性的箭頭函式。
問題一，為什么不能像 onChangeMock 那樣呼叫 onSubmitMock？
問題二（已洗掉）
對此有任何想法嗎？非常感謝提前
uj5u.com熱心網友回復：
問題一，為什么不能像 onChangeMock 那樣呼叫 onSubmitMock？
要呼叫一個函式，必須有人呼叫它。如果您撰寫的代碼props.onChange沒有括號，那么您只是在參考一個函式，而不是呼叫它。因此，使用props.onSubmit;and onChange={props.onChange}，該函式將不會被呼叫。反正不在這行代碼上...
但是onChangeprop 的設計是這樣的，如果您將函式的參考傳遞給它，那么 react 保證它會在更改事件發生時為您呼叫該函式。因此，稍后當事件發生時，props.onChange為您做出反應。
使用該onSubmit函式，您還向其中傳遞了一個函式：您撰寫的匿名箭頭函式，其文本是：
() => {
props.onSubmit;
console.log('onsubmit function is being called.');
}
當事件發生時，react 將呼叫該函式。在您的自定義函式中，您可以做任何您喜歡的事情，包括呼叫 props.onSubmit。但是您將自己呼叫它，而不是要求 react （或其他任何東西）為您呼叫它，因此您需要自己呼叫它props.onSubmit()
問題二 [...]
我不清楚你有什么導致型別錯誤的代碼。如果您顯示導致錯誤的代碼，我將編輯此問題以回答該問題
uj5u.com熱心網友回復：
看來您忘記呼叫onSubmit回呼函式了。只需像這樣添加缺少的括號：
onSubmit={() => {
props.onSubmit();
}}
如果console.log不需要，那么這應該作業：
onSubmit={props.onSubmit}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/460503.html
上一篇：模擬靜態類屬性的問題