Question

我正在尝试模拟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);
    });
});

`

单击innerHTML的Jest：TypeError：undefined不是函数

0 个答案: