[英]Unit test form submission with data using react testing library
I have a react component with a form.我有一个带有表单的反应组件。 I want to unit test (using jest and RTL) if form gets submitted with correct data.
如果表单使用正确的数据提交,我想进行单元测试(使用 jest 和 RTL)。 Here are my component and unit test method:
这是我的组件和单元测试方法:
Component:零件:
class AddDeviceModal extends Component {
handleOnSave(event) {
const { deviceName } = event.target;
const formData = {
deviceName: deviceName.value,
};
this.props.onSave(formData);
}
render() {
return (
<Form onSubmit={this.handleOnSave}>
<Form.Label>Device Name</Form.Label>
<Form.Control name="deviceName" placeholder="Device Name" required />
<Button type="submit">Save Device</Button>
</Form>
);
}
}
Unit Test:单元测试:
it("Test form submit and validation", () => {
const handleSave = jest.fn();
const props = {
onSave: handleSave,
};
render(<AddDeviceModal {...props} />);
const deviceNameInput = screen.getByPlaceholderText(/device name/i);
fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
fireEvent.click(getByText(/save device/i));
});
However, in handleOnSave()
, I get error as deviceName
is undefined
.但是,在
handleOnSave()
中,我收到错误,因为deviceName
is undefined
。 For some reason, it is not able to get the textbox value from event.target
.由于某种原因,它无法从
event.target
获取文本框值。 Am I doing something wrong in above code?我在上面的代码中做错了吗? Needed help in fixing this issue.
需要帮助来解决此问题。
The problem you have it with trying to access the input directly from event.target
.尝试直接从
event.target
访问输入时遇到的问题。 You should access it from event.target.elements
instead: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements .您应该从
event.target.elements
访问它: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements 。
function handleOnSave(event) {
event.preventDefault();
const { deviceName } = event.target.elements;
const formData = {
deviceName: deviceName.value
};
// this will log the correct formData even in tests now
console.log(formData);
this.props.onSave(formData);
}
And here is your test:这是你的测试:
it("Test form submit and validation", () => {
const { getByPlaceholderText, getByText } = render(<App />);
const deviceNameInput = getByPlaceholderText(/device name/i);
fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
fireEvent.click(getByText(/Save Device/i));
});
I created a codesandbox where you can see this in action: https://codesandbox.io/s/form-submit-react-testing-library-45pt8?file=/src/App.js我创建了一个代码框,您可以在其中看到它的实际效果: https://codesandbox.io/s/form-submit-react-testing-library-45pt8?file=/src/App.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.