1

我正在尝试模拟 DOM 的单击事件，但由于某些有趣的原因，它不起作用。

将事件附加到给定的 a 元素似乎是有效的，但是单击该元素只会一直诅咒我。

我在这里有什么概念上的错误吗？

    describe('Dummy', function test() {
    it('clicks the element', function it() {
        document.body.innerHTML = `
            <div>
                <input type="text">
                <a href="http://www.google.fi">This is a regular link</a>
                <button>Some text</button>
            </div>
        `;
        const element = document.getElementsByTagName('a')[0]; // Get the 1st a-element
        element.addEventListener('click', e => {
            console.log('Clicked', e);
        });
        element.click(); // Invokes an error: TypeError: undefined is not a function
        expect(3).toBe(3);
    });
});

这是一个在浏览器中工作的示例，但在运行 grunt jest 时不能：

 document.body.innerHTML = '<div><input type="text"><a href="http://www.google.fi">This is a regular link</a><button>Some text</button></div>';
 element = document.getElementsByTagName('a')[0];
 element.addEventListener('click', function(e) {
   e.preventDefault();
   console.log('clicked:', e)
 })
 element.click();

解决方案： 由于 jest-cli 0.4.19 确实有这么古老的 jsdom 版本（~0.10.3），您需要使用已弃用的 Javascript 方法，例如.initEvent. 像这样的适当的事件创作是let evt = new MouseEvent('click');行不通的。

describe('Dummy', function test() {
    it('clicks the element', function it() {
        const evt = document.createEvent('MouseEvents');
        evt.initEvent('click', false, true);
        document.body.dispatchEvent(evt);
        document.body.innerHTML = '<div><input type="text"><a href="http://www.google.fi">This is a regular link</a><button>Some text</button></div>';

        const element = document.getElementsByTagName('a')[0];
        element.addEventListener('click', e => {
            e.preventDefault();
            console.log('clicked!');
        });
        element.dispatchEvent(evt);
        expect(3).toBe(3);
    });
});

`

4

0 回答 0