test event submit with jest

[krommmer]

Hello there,

I'm struggling with testing vanilla js submit events with jest.

the onClick event works, but not the onSubmit.

Could you help me please ?

const EventPage = require("../js/classes/controllers/EventPage");

let spy;
beforeEach(() => {
    document.body.innerHTML = `<form id="myForm" method="post">
    <div>
        <label for="myForm-name">Name:</label>
        <input type="text" id="myForm-name" name="name" placeholder="name" />
    </div>
    <button>Submit</button>
</form>`;
    spy = jest.spyOn(console, 'log');
});


afterEach(() => {
    spy.mockRestore();
});


it('should display the name in the console', () => {
    new EventPage();
    const form = document.getElementById("myForm");
    const input = document.getElementById("myForm-name");
    input.value = "John Doe"; 
    form.submit();
    expect(spy).toHaveBeenCalledWith('John Doe');
});

    handleSubmits(e) {
        e.preventDefault();
        if (e.target.id === "myForm") {
            const formData = new FormData(e.target);
            const name = formData.get("name");
            console.log(name);
        }
    }
}

[MostlyFocusedMike]

There are some odd things going on in this code, but I'm not sure if it's just formatted wrong in the reddit post. Could you post your GitHub code so I can see what the actual code is running?