Triggering a "click" on a button with type="submit" doesn't fire the "submit" event on the containing form

[thejcannon]

Version

1.0.0-beta.29

Reproduction link

https://codesandbox.io/s/vue-template-2txst

Steps to reproduce

(I can't seem to get the tests to not fail with "Cannot read property 'Ctor' of undefined")

Once the tests work though, simply running them should outline the bug.

What is expected?

When I click the "submit" button, the form "submit" listener to be called.

What is actually happening?

It isn't being called.

[aholzner]

You can trigger submit instead of click.

submitButton.trigger('submit'); or wrapper.find('form').trigger('submit')

[thejcannon]

Well sure, but I'd my test to not make assumptions about the code. For instance, perhaps the submit code happens on a click listener on the button or it happens on the form submission. Either way clicking the button would do the right thing in the production environment, so I want to write my tests in a way that doesn't assume the how, just the what.

[aholzner]

@thejcannon Well, based on your code, your are listening to, "submit," event.

<form @submit.prevent="submit">
    <button type="submit">Submit me</button>
    <p>{{ submittedCalled }}</p>
  </form>

So, I would say finding the button and triggering a submit, would reflect your code. Or you can listen to "click," event if that's what you want. Oh, one thing, If I'm not mistaken, you are not, "clicking" on a button in your tests, you are triggering an event.

[vvanpo]

@thejcannon this is a problem with jsdom version 12, which is fixed in https://github.com/jsdom/jsdom/releases/tag/13.1.0

The problem is that @vue/test-utils constrains jsdom to ^12, so the fix is to upgrade to 13.1.

Edit: I was wrong, @vue/test-utils doesn't actually depend on jsdom, only the root (private) package does for running its own tests. So this sounds like a different problem.

Edit 2: It's jest's fault:

• In the 24.8.0 version you are using: https://github.com/facebook/jest/blob/v24.8.0/packages/jest-environment-jsdom/package.json#L18
• Request to upgrade jsdom from v11 to latest v15 jestjs/jest#9172

[vvanpo]

So I think we can close this, @thejcannon , since it is unrelated to @vue/test-utils and will be fixed in Jest 25: jestjs/jest#8862

[lmiller1990]

Yep, I had this problem recently. It's jsdom! Bugs are few and far in jssom, which is a remarkable - implementing a whatwg dom is an extremely complex endeavor.

Anyway, I just use trigger('submit') on the form. I believe this is what a browser does anyway; clicking a button in a form triggers the form's submit event.

If someone can reproduce this with jest 25 (you need to install https://www.npmjs.com/package/jest-environment-jsdom-sixteen) please comment and we will reopen this.