How to create `oninput` event on input[text] element with jsdom?

Question

This my jsdom setup. I want to test oninput event for input[text] element. How can trigger oninput event? Because just setting element.value do not trigger this event.

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;
        });
    });

Quentin · Accepted Answer · 2020-08-02 09:02:31Z

As per this answer, you can create an Event object and use it to trigger the input event by executing the JS.

Since you are using JSDOM, you can do that in the context of the page through 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());

gerardnico · Accepted Answer · 2022-06-01 11:56:01Z

0

I can't improve the previous answer because I get the error: edit queue is full.

Since jsDOM gives you a near complete browser environment, you don't need the eval. You can trigger the event directly from Node.

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

answered Jun 1, 2022 at 11:56

gerardnico

1,11312 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to create `oninput` event on input[text] element with jsdom?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related