Question

我想在Jest文档中以indicated的形式模拟普通的dom点击：

test('displays a user after a click', () => {

  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Use jquery to emulate a click on our button
  $('#button').click();

  expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});

我的功能如下：

function clickTrack() {
    const data = {};
    document.addEventListener('click', function clicked(e) {
        if (e.target.matches('a')) {
            e.preventDefault();
            data['click.Classes'] = e.target.classList;
            data['click.ID'] = e.target.id;
            data['click.Destination'] = e.target.href;
            data['click.ElementText'] = e.target.innerText;
        }
    }, false);
    return data;
}

测试：

describe('Click Tracking', () => {

    test('Clicking on an a tag will collect its information', () => {
        clickTrack();
        document.body.innerHTML = '<a class="j1 j2 j3" id="j" href="http://www.google.com/">Jest</a>';
        document.getElementById('j').click();
        expect(clickTrack()).toEqual({a:'b'});
    });

});

我希望输出结果模糊不清：

   {
    click.Classes: ["j1 j2 j3"]
    click.Destination: "https://www.google.com/"
    click.ElementText: "Jest"
    click.ID: "j"
   }

但是返回一个空对象。

Answer 1

clickTrack会挂接click事件侦听器并返回一个data对象，该对象将在发生点击事件时进行更新，因此您只需调用一次clickTrack。

现在您在点击事件之后再次调用它，因此它正在创建其他 click侦听器并返回一个新的空{{1} }对象。

您还需要使用data作为文本，并通过在e.target.text上调用split(' ')获得类名：

e.target.className

仅开玩笑-addEventListener〜单击断言

1 个答案: