如何对 HTML 代码的输出进行单元测试答案

【问题标题】：how can I unit test an output of HTML code如何对 HTML 代码的输出进行单元测试
【发布时间】：2019-05-08 13:45:18
【问题描述】：

我对 Web 开发和测试非常陌生（起步缓慢）。我有一个带有按钮的页面。单击按钮后，将显示一些信息/文本。

我如何编写测试用例来测试输出是否符合预期（显示）？

我想写一个测试用例，确保点击按钮时文本显示出来。

<!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!');
}

【问题讨论】：

标签： javascript html reactjs unit-testing jestjs

【解决方案1】：

您可以测试字符串是否被渲染，但单元测试应该测试数据，而不是标记。后者的问题相当罕见，并且在部署和手动测试代码时更为明显。（你不会推广那些没有明显呈现带有 something 的按钮的更改。）

相反，将值分配给一个变量并测试该变量在您的函数中是否正确。

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），或在文档中查找整个标记字符串。这两种方法都满足您的要求，但很脆弱（取决于特定的标记和字符串值）。

检查整个文档的标记 sn-p 可能如下所示：

 document.documentElement.innerHTML.indexOf('<button>string</button>')