javascript - 用 vanilla JS 开玩笑 - 在 DOM 上测试生成的元素
问题描述
在网上搜索了很多,但找不到获取元素的 innerHTML 并将其与应呈现的结果进行比较的最佳方法(我正在尝试与字符串进行比较)
expect(document.body.innerHTML.toString()).toBe("<div class='wrapper'><span>test</span></div>");
我正在尝试添加一些空格并且测试失败所以我猜有更好的方法
另外,无法查询体内生成的特定元素,为什么?
解决方案
您可以使用快照测试来测试 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
推荐阅读
- ruby-on-rails - 如何在 Rails 中设置 cookie 以确保安全
- java - 如何在jsp中提供用户角色和权限
- python - 将 netCDF 文件转换为 csv
- postgresql - 从触发器执行存储过程时出现 Postgres 错误 [42883] 和 [42601]
- r - 在 BASE R 中操作 data.frame 格式
- python - 二进制插入排序与快速排序
- html - 如何有两个只有月份和年份的不同日期的垫子日期选择器
- python - 用于聚合字典的 ReduceByKey 方法
- flutter - Flutter - PopupMenuItem - 如何获取价值
- macos - 如何通过苹果脚本和/或命令行修改“安全和隐私”