Question

如何使用Jest测试HTML字符串？

现在，我正在使用常规字符串比较（如下所示）进行此操作。当我运行此测试用例时，它工作正常。

it('should compile partial as per the context', () => {
  const receivedOutput = someFunctionReturningHTMLString();
  //*PS: someFunctionReturningHTMLString() is function which returns a html string;*
  //In above call, lets assume it returns `<a href="/" class="some_class1 some_class2" >`

  const expectedResult = `<a href="/" class="some_class1 some_class2" >`;
  expect(receivedOutput .trim()).toEqual(expectedResult.trim())
});

但是，我发现这种测试纯字符串值的方法不是一个好的方法。

有人可以通过更好的方法帮助我实际测试HTML字符串的内容吗？像测试字符串中的标签是否具有特定的类？类似于我们可以使用Enzyme for React组件实现的功能。

Answer 1

假设我们正在谈论使用jest和vanilla JS进行测试。

如果您要测试是否从someFunctionReturningHTMLString返回有效的HTML（我认为这很重要），另一种方法是创建DOM元素，并使用{{1 }}，那么您就可以将其测试为普通HTML并确保其有效：

innerHTML

那么测试嵌套元素，文本节点等将非常简单，希望对您有所帮助。

Jest的文档中有一些how to work with DOM Manipulation的示例，它们使用jQuery进行演示，但是应用的原则才是重要的。

开玩笑地测试HTML字符串

1 个答案: