FireEvent on a submit button doesn't trigger a re-render

[zanonnicola]

• react-testing-library version: 0.3.0
• node version: v8.12.0
• npm (or yarn) version: v6.4.1

Relevant code or config

class App extends Component {
  state = {
    data: []
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
      data: ["asd", "asdads"]
    });
  };
  render(props, { data }) {
    return (
      <div>
        <h1>Example</h1>
        <form onSubmit={this.handleSubmit} data-testid="form">
          <button type="submit">Submit</button>
        </form>
        <h2>Results</h2>
        <div class="list">
          {data.map((result, i) => (
            <div key={i}>{result}</div>
          ))}
        </div>
      </div>
    );
  }
}

// Test is green
test("Render messages on submit", () => {
  debounceRenderingOff(); //turns off the debounce, no need for any waits
  const { getByText, getByTestId } = render(<App />);
  fireEvent.submit(getByTestId("form"));
  expect(getByText("asd")).not.toBeNull();
  expect(getByText("asdads")).not.toBeNull();
});

// Test is red :(
test("Render messages on click submit", () => {
  debounceRenderingOff(); //turns off the debounce, no need for any waits
  const { getByText, getByTestId } = render(<App />);
  fireEvent.click(getByText("Submit"));
  expect(getByText("asd")).not.toBeNull();
  expect(getByText("asdads")).not.toBeNull();
});

What you did:

This is a simplified version of an actual component. Basically I wanted to verify that on submit my messages will be displayed on the page. I removed all the business logic from it. It's just a simple component now.

What happened:

Simulate a click on a submit button doesn't trigger a re-render.
But if I fireEvent.submit(getByTestId("form")); it will trigger setState()

Error

Unable to find an element with the text: asd.

Maybe I'm doing something wrong but it seems strange that clicking on a submit button does't trigger the form

How to reproduce

https://codesandbox.io/s/7wyr0x6mxj?fontsize=14&previewwindow=tests

Thanks for this library by the way! If you need help or looking for contributors let me know. Happy to help :)

[paulchaplin]

@zanonnicola I encountered something similar recently that made me try preact-testing-library as an alternative (thanks, @antsmartian!), and your failing test also fails in 0.3.0 for me, but passes with the latest version (0.4.0), so I think this is fixed now.

My own problems seemed to be caused when using Jest, which depends on a very outdated version of jsdom. If you use Jest and still have problems even with 0.4.0, it might be worth trying out jest-environment-jsdom-fifteen or similar.

[zanonnicola]

@paulchaplin just tested this and upgrading to 0.4.0 solved the issue!
Thanks 💯