pri*_*im3 5 html javascript unit-testing reactjs jestjs
我对网络开发和测试非常陌生（开始很慢）。我有一个带有按钮的页面。单击按钮后，会显示一些信息/文本。
如何编写测试用例来测试输出是否符合预期（显示）？
我想编写一个测试用例以确保单击按钮时显示文本。
<!DOCTYPE html>
<html>
<body>
<button onclick="buttonClick()">Click Me</button>
<p id="test"></p>
<script>
function buttonClick() {
document.getElementById("test").innerHTML = "TESTING!";
}
</script>
</body>
</html>
我的猜测是我可以使用某种字符串验证器。如果屏幕上出现字符串，则表示测试通过。我不确定这是否有意义，或者这是否是正确的方法。
谢谢，
测试代码：
var elem = document.getElementById('test');
var text = 'TESTING!';
if (
document.getElementById('test').innerHTML.indexOf('TESTING') != -1){
alert('success!');
}
您可以测试字符串是否已呈现，但单元测试应该测试数据，而不是标记。后者的问题相当罕见，并且在部署和手动测试代码时更加明显。（您不会推广那些不会明显呈现带有某些内容的按钮的更改。）
相反，将值分配给变量并测试该变量在函数中是否正确。
function buttonClick();
let myButtonText = 'TESTING!';
document.getElementById("test").innerHTML = myButtonText;
}
// in the test, assert that myButtonText should equal your string,
// which demonstrates that the function works or has been called
如果将字符串传递到调用该函数的函数中，则此测试可能更有价值：
function buttonClick(str);
document.getElementById("test").innerHTML = str;
}
// assert that str is defined when inside the function
如果需要测试输出，您可以根据元素 ID 查看按钮的字符串值 (nodeValue或textContent)，或者在文档中查找整个标记字符串。这两种方法都满足您的要求，但都很脆弱（取决于特定的标记和字符串值）。
检查整个文档中的标记片段可能如下所示：
document.documentElement.innerHTML.indexOf('<button>string</button>')
当然，如果任何脚本或库添加了类或其他属性，则会失败。
| 归档时间： |
|
| 查看次数： |
1635 次 |
| 最近记录： |