用 vanilla JS 开玩笑 - 在 DOM 上测试生成的元素

Question

在网上搜索了很多，但找不到获取元素的 innerHTML 并将其与应呈现的结果进行比较的最佳方法（我正在尝试与字符串进行比较）

expect(document.body.innerHTML.toString()).toBe("<div class='wrapper'><span>test</span></div>");

我正在尝试添加一些空格并且测试失败所以我猜有更好的方法

另外，无法查询体内生成的特定元素，为什么？

Answer 1

您可以使用快照测试来测试 DOM 树结构。

当您想确保您的 UI 不会发生意外更改时，快照测试是一个非常有用的工具。

例如

describe('67618056', () => {
  it('should pass', () => {
    document.body.innerHTML = `
        <div class='wrapper'>
            <span>test</span>
        </div>
    `;
    expect(document.body.innerHTML.toString()).toMatchInlineSnapshot(`
      "
              <div class=\\"wrapper\\">
                  <span>test</span>
              </div>
          "
    `);
  });
});

测试结果：

 PASS  examples/67618056/index.test.ts (7.563 s)
    ✓ should pass (17 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        8.03 s, estimated 9 s