javascript - 开玩笑 | 断言在 addEventListener 回调中调用了一个函数
问题描述
我有以下功能:
测试代码
export default function main() {
const createAndAppendPTag = () => {
const p = document.createElement('p');
document.body.appendChild(p);
};
window.document.addEventListener('click', () => {
createAndAppendPTag();
});
}
问题是:如何使用createAndAppendPTag
在文档单击事件上调用的 Jest 断言?
笑话
这是我尝试过的,但似乎无法通过测试:
import main from './main'
window.document.addEventListener = jest.fn();
const createAndAppendPTag = jest.fn();
describe('Main', () => {
const documentClickEvent = new Event('click');
test('appends p tag to the document', () => {
// dispatching event before and after invoking `main` to be sure
window.document.dispatchEvent(documentClickEvent);
main();
window.document.dispatchEvent(documentClickEvent);
expect(window.document.addEventListener).toHaveBeenNthCalledWith(1, 'click', () => {});
expect(createAndAppendPTag).toHaveBeenCalledTimes(1);
});
});
终端
这导致以下结果:
Main › appends p tag to the document
expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)
n: 1
Expected: "click", [Function anonymous]
Number of calls: 0
5 | main();
6 | window.document.dispatchEvent(documentClickEvent);
> 7 | expect(window.document.addEventListener).toHaveBeenNthCalledWith(1, 'click', () => {});
* | ^
提前致谢。
解决方案
我运行了这个简化的测试来检查副作用(p
元素被附加到正文):
main.js
export default function main() {
const createAndAppendPTag = () => {
const p = document.createElement('p');
document.body.appendChild(p);
};
window.document.addEventListener('click', () => {
createAndAppendPTag();
});
}
main.test.js
import main from `../main.js`;
it('"main" listener appends "P" to body upon click', () => {
// add listener
main();
// clear body contents
document.body.innerHTML = "";
// dispatch click event to listener
const addEvt = new Event('click');
document.dispatchEvent(addEvt);
// check for existence of "P" element
const bodyEl = document.body.firstChild;
expect(bodyEl).not.toEqual(null);
expect(bodyEl.tagName).toBe('P');
document.body.innerHTML = "";
});
它通过了:
✓ "main" listener appends "P" to body upon click (2 ms)
推荐阅读
- excel - Excel - 根据每个段的值范围查找组
- python - Python - 更改 IDLE 文本颜色在 Windows 上不起作用
- angular - 带有验证器 HTML 渲染问题的 ionic 4 + angular 7 Reactive Form
- reactjs - 使用 history.push() 方法将状态传递给另一个组件
- python - 关于定义函数的基本 Python 问题
- python - 在 Python 字典中搜索字符串
- javascript - 如何从文本文件中提取数据并输出到网页表
- python - 在 Python 中绘制 3-D 图像
- c++ - 迭代可执行文件本身时,std::filesystem::recursive_directory_iterator 崩溃
- alexa - 英语Alexa Skill中的法语发音?