我有一个场景,当用户在没有同意条款的情况下点击Next按钮时,我应该抛出一个错误,说'请同意条款',所以我需要使用Jest和React测试库为它编写一个单元测试用例。我如何才能实现这一点。
import Terms from "./Terms";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Terms />
</div>
);
}
const { useState } = require("react");
function Terms() {
const [checked, setChecked] = useState(false);
const [errorMessage, setErrorMessage] = useState(false);
const onNext = (e: React.FormEvent) => {
e.preventDefault();
if (checked !== true) {
setErrorMessage(true);
} else {
setErrorMessage(false);
}
};
const handleCheckBoxChange = (e: React.FormEvent) => {
const result = (e.target as HTMLInputElement).checked;
setChecked(result);
};
return (
<div>
<h1>Terms</h1>
<input type="checkbox" value={checked} onChange={handleCheckBoxChange} />
<label>click to agree the terms</label>
<br />
{errorMessage && <p>Please agree the terms before proceeding</p>}
<button onClick={onNext}>Next</button>
</div>
);
}
export default Terms;
1条答案
按热度按时间acruukt91#
好吧,先把它分解一下。你需要一个测试,它一个接一个地做以下事情:
1.渲染
Terms
组件1.找到标记为“下一步”的按钮
1.单击按钮
1.在屏幕上查找错误文本
你可以使用react-testing-library来获取你需要的元素,使用user-event-testing-library来与它们交互。
将这两个库作为依赖项添加到项目中,并尝试以下操作,导入使其工作所需的内容:
您可能也希望对您的快乐案例进行类似的测试,即在单击按钮之前同意条款。