problem with material-ui elements

[leogoesger]

• react-testing-library version: 5.3.1
• react version: 16.7.0-alpha.2
• node version: 10
• npm (or yarn) version: 6.1.0

Relevant code or config:

test('calls with user email and password', () => {
  const login = jest.fn();
  const error = null as any;

  const { getByLabelText, getByText } = render(
    <LoginForm login={login} error={error} />
  );

  const email = getByLabelText('Email');
  const password = getByLabelText('Password');
  email.value = 'test@test.com';
  password.value = 'password';
  fireEvent.click(getByText('Login'));

  expect(login).toHaveBeenCalledTimes(1);
  expect(login).toHaveBeenCalledWith({
      email: 'leoq91@gmail.com',
      password: 'password',
  });
});

// login-form

export const LoginForm: FunctionComponent<IProps> = ({ login, error }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <Paper>
      <form
        onSubmit={e => {
          e.preventDefault();
          return login({ email, password });
        }}
      >
        <TextField
          id="email"
          label="Email"
          onChange={e => setEmail(e.target.value)}
        />
        <TextField
          id="password"
          label="Password"
          type="password"
          onChange={e => setPassword(e.target.value)}
        />
        <LoginError error={error} />
        { /* <button type="submit">Login</button> This works...*/}
        <Button
          type="submit"
        >
          Login
        </Button>
      </form>
      <Divider />
      <Typography style={{ margin: '10px auto' }}>Forgot password?</Typography>
    </Paper>
  );
};

What you did:

Writing my first test with material-ui for a login form.

https://codesandbox.io/s/lx5nl1839z

What happened:

Test would not pass when I try to click on the submit button. BUT It works as expected if I use a regular button instead of a material ui Button.

Reproduction:

Problem description:

Suggested solution:

[gnapse]

Does it work in the browser with the material-ui button?

Also, probably unrelated, but you should not set the input elements values with element.value = '123'. You should use fireEvent.change(inputElement, { target: { value: '123' } }) instead.

It would help if you provided a ready-to-be-used reproduction repo, or better yet, a code sandbox.

[leogoesger]

added sandbox https://codesandbox.io/s/lx5nl1839z

[rGiladi]

fireEvent.click(getByText('Login')) -> fireEvent.click(getByText('Login').parentNode)

Take a look at the button component implementation.
You'll see that the children prop (i.e "Login" text in your case) is rendered inside a span element so when you call fireEvent.click(getByText('Login')) in your test, you are actually simulating the click event on the span element and not the actual button.

https://codesandbox.io/s/kxyw71ryq3

[kentcdodds]

Hmm... If that's the case then this is a bug because it should bubble up from the span to the button. Anyone care to look into why that's not happening?

[dfcook]

The event is bubbling, if you add an onClick handler to the Button then that fires. The issue seems to be that a bubbled event does not then trigger form submission.

[kentcdodds]

Oh, that's interesting. I wonder what happens in a real browser... Hmmm...

[kentcdodds]

I'm unable to reproduce this: https://codesandbox.io/s/mjm27nyp28

[kentcdodds]

However, if I download that sandbox and run it locally then I can reproduce it

This indicates to me that this is a jsdom bug.

[Gpx]

I think codesandbox is somehow running the tests in the browser and not in jsdom. I had a similar issue with jsdom not firing the submit event

[kentcdodds]

I think codesandbox is somehow running the tests in the browser and not in jsdom.

That's exactly what's happening. Incidentally this is a great way to know whether what you're experiencing is a JSDOM issue or not 😉

[kentcdodds]

I'm going to go ahead and try to make a smaller example that shows this problem using just JSDOM. Then I'll file that as an issue to JSDOM.

[kentcdodds]

Alright! Anyone wanna dig in jsdom to figure out what's going on? jsdom/jsdom#2449

[kentcdodds]

A fix has been merged in jsdom. Hopefully it's released soon. Also hopefully Jest's version range of jsdom accepts the fix 🤞

There's nothing more we can do here, so I'll close this.

[ryanadhi]

I am still having the issue using MUI (material ui), I am expecting when clicking the 'login' button it will show the text of error helper. somehow the text does not show when I use screen.debug()

Any suggestion?

for context

    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.5",
    "react": "^18.2.0",