[英]Unit test form submission with data using react testing library
我有一个带有表单的反应组件。 如果表单使用正确的数据提交,我想进行单元测试(使用 jest 和 RTL)。 这是我的组件和单元测试方法:
零件:
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>
);
}
}
单元测试:
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));
});
但是,在handleOnSave()
中,我收到错误,因为deviceName
is undefined
。 由于某种原因,它无法从event.target
获取文本框值。 我在上面的代码中做错了吗? 需要帮助来解决此问题。
尝试直接从event.target
访问输入时遇到的问题。 您应该从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);
}
这是你的测试:
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));
});
我创建了一个代码框,您可以在其中看到它的实际效果: https://codesandbox.io/s/form-submit-react-testing-library-45pt8?file=/src/App.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.