Simulate.click on a submit button

[thchia]

• react-testing-library version: 2.1.1
• node version: 8.9.3
• npm (or yarn) version: yarn 1.3.2

Relevant code or config

const Component = () => {
  return <form onSubmit={handleSubmit}>
    <button type="submit">Submit</button>
  </form>
}

What you did:

const submitButton = getByText('Submit')

// does not work
Simulate.click(submitButton)

// works
Simulate.submit(submitButton)

What happened:

Submit buttons cannot be clicked using Simulate.click.

Problem description:

This is not a bug as far as Simulate is concerned, but I think that in the spirit of the Guiding Principles, resorting to calling .submit should be discouraged. Users click submit buttons, they do not invoke the submit event.

Certain libraries like react-final-form rely on the submit event to display validation errors. If for example, you have logic to disable a submit button from being clickable, calling Simulate.submit will ignore this and call the submit event anyway. This can result in incorrect assertions.

Suggested solution:

Add a quick caveat in the docs under Simulate. Note that calling

submitButton.dispatchEvent(new MouseEvent('click'))

can solve this issue. I am good to submit a PR if this is deemed worth it.

EDIT: I guess this is technically covered in the fireEvent use case...

[kentcdodds]

I agree we should add a note in the docs under Simulate. And the suggested solution should be to use fireEvent 👍 Thanks!

[antsmartian]

@kentcdodds I was about to talk about this sometime back... We have form.js line : https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/forms.js#L51 where we use submit method from Simulate, may be we need to add comments over there and say this is actually possible via fireEvent API or may be remove simulate and add fireEvent.click.

I was just thinking like does Simulate is really required, provided we have fireEvent in place? May be there is something that Simulate does which our fireEvent can't do? As suggested, we need to add docs on Simulate vs fireEvent and their usages.

[kentcdodds]

May be there is something that Simulate does which our fireEvent can't do?

Yes, Simulate can work with components which are not rendered into the document, fireEvent must be used on components that are rendered into the document. See more info about this in the README. This wouldn't be a problem with frameworks which do not bind events to the document.

[antsmartian]

Got it, thanks!

[antsmartian]

Closing this w.r.t #57

[ajur58]

Correct me if I'm wrong, but JSDOM does not support submitting the form element: jsdom/jsdom#1937

I get the same error as described in the link above when trying to do so.

Am I missing something?

[kentcdodds]

This is a pretty old issue. Could you open a new one with an example of what you're trying to do?

[ajur58]

Sorry for not being clear enough: I think this is not an issue related to react-testing-library.

I tried to trigger a form submit using fireEvent. I got the error described in the link I posted before (JSDOM not supporting submitting forms), but reading the comments above I was under the impression that forms can be submitted. I'm still not sure if this is the case.

I asked in this thread as I thought other people might end up here when searching for the same issue.

Sidenote: We're in the process of moving from enzyme to react-testing-library, love the new approach! Thanks!

[kentcdodds]

Glad you're liking react-testing-library @j13l!

Hmmm, this actually works today:

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

test('works', () => {
  const handler = jest.fn(e => e.preventDefault())
  const {getByTestId} = render(
    <form onSubmit={handler} data-testid="form">
      <button type="submit">Submit</button>
    </form>,
  )
  fireEvent.submit(getByTestId('form'))
  expect(handler).toHaveBeenCalledTimes(1)
})

Though I would actually recommend not firing a submit event on a form, but instead do what the user would do and click on the submit button:

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

test('works', () => {
  const handler = jest.fn(e => e.preventDefault())
  const {getByText} = render(
    <form onSubmit={handler}>
      <button type="submit">Submit</button>
    </form>,
  )
  fireEvent.click(getByText(/submit/i))
  expect(handler).toHaveBeenCalledTimes(1)
})

Note: That in this case, having my submit handler call preventDefault() was key to avoiding the warning you're talking about :)

I hope that's helpful!

[ajur58]

Yes, it works!!

I thought submitting via click is breaking due to the JSDOM error.

Turns out it was something completely different: react-intl library injects a span for translations leading to <button type="submit"><span>submit</span></button>. Firing a click event on the span does not trigger a form submit in the tests, but it does in the browser. Is this desired behaviour?

Thanks a lot for your help @kentcdodds 👏