如何使用 jsdom 在 input[text] 元素上创建 `oninput` 事件？

【问题标题】：How to create `oninput` event on input[text] element with jsdom?如何使用 jsdom 在 input[text] 元素上创建 `oninput` 事件？
【发布时间】：2020-08-02 08:42:37
【问题描述】：

这是我的 jsdom 设置。我想测试 input[text] 元素的 oninput 事件。如何触发oninput事件？因为只是设置element.value 不会触发这个事件。

const jsdom = require("jsdom");
    const { JSDOM } = jsdom;      
    suiteSetup(() => {
        return JSDOM.fromFile("./views/index.html", {
          runScripts: "dangerously",
          resources: "usable"
        }).then(dom => {
          global.dom = dom
          global.window = dom.window;
          global.document = dom.window.document;
        });
    });

【问题讨论】：

标签： javascript jsdom

【解决方案1】：

按照this answer，可以创建一个Event对象，通过执行JS来触发input事件。

由于您使用的是 JSDOM，因此您可以通过 eval 在页面上下文中执行此操作。

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const dom = new JSDOM(
    `<!DOCTYPE html>
        <meta charset="utf-8">
        <title>Test</title>
        <input>
        <p>Hello world</p>

        <script>
            document.querySelector("input").addEventListener("input", event =>
                document.querySelector("p").textContent = event.target.value
            );
        </script>`,
    {
        runScripts: 'dangerously',
        resources: 'usable',
    }
);

dom.window.eval(`
    const input = document.querySelector("input");
    input.value = "New value";
    const event = new Event('input', {
        bubbles: true,
        cancelable: true
    });
    input.dispatchEvent(event);
`);

console.log(dom.serialize());

【讨论】：