我是testing-library和jest的新手，我想測驗組件內部的一個函式，它能改變一個輸入的值。這個組件是一個表單，它的另一個組件是一個輸入。
export const Form=（） => {
const [name, setName] = useState(""/span>)。
const handleOnSubmit = e => {
e.preventDefault（）。
const form = e.target。
};
const inputChange = (param) => (e) => /span>{
const inputValue = e.target.value。
setName（inputValue）。
};
return (
< form className="form" onSubmit={handleOnSubmit}>/span>
< InputGroup text="name"/span> type="text" value={name} functionality={inputChange("name"）}/>
< 按鈕 型別="提交" disabled={name === undefined}/>
</form>
);
};
export default Form;
輸入組組件看起來像這樣
export const InputGroup=（{type, id, value, required, functionality, text}) => {
return (
<label>{text}</label>
< input className="input" type={type} id={id} name={id} value={value}> required={required} onChange={功能}
/>
);
};
我已經嘗試過類似的方法，但我不太確定如何測驗一個直接在組件Form上的函式，以及它是否被傳遞給組件InputGroup。
describe("Form"/span>, () => {
let value。
let 組件。
const handleSubmit = jest.fn（）。
const handleChange = ev => {
ev.preventDefault（）。
value = ev.currentTarget.value。
}
beforeEach(() => {
component = render(
< Form onSubmit={handleSubmit} functionality={handleChange} />
);
});
it("檢查錯誤名稱被觸發", () => {
const input = component.getByText("name") 。
fireEvent.change(input, {target: {value: "aaa"}}）。)
});
});
我得到一個錯誤，說 "給定的元素沒有一個值設定器"，那么我怎樣才能將inputChange函式傳遞給InputGroup組件？
uj5u.com熱心網友回復：
好的，感謝你分享InputGroup。所以你可以很容易地測驗InputGroup。
describe("InputGroup", （）=> {
it("檢查錯誤名稱被觸發", () => {
const fn = jest.fn()
render(< InputGroup functionality={functionality} /> )
fireEvent.change(input, {target: {value: "aaa"}}）。)
expect(fn).toHaveBeenLastCalledWith(...)
});
});
只是一個想法。上面的代碼可能不會像發布的那樣運行。好了，現在來看看Form。這個步驟可能是類似的，但可能需要你花一些時間去了解，但你不需要再次測驗功能，只是因為這個道具與Form沒有關系。從表單的角度來看，它只關心onSubmit，所以你可以用之前發布的類似方式來測驗。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/318663.html
標籤：