React-testing-library: problem with material-ui elements

Created on 5 Dec 2018 · 13Comments · Source: testing-library/react-testing-library

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 = '[email protected]';
  password.value = 'password';
  fireEvent.click(getByText('Login'));

  expect(login).toHaveBeenCalledTimes(1);
  expect(login).toHaveBeenCalledWith({
      email: '[email protected]',
      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:

Most helpful comment

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.

kentcdodds on 11 Dec 2018

👍3 🎉1

All 13 comments

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.

gnapse on 5 Dec 2018

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

leogoesger on 5 Dec 2018

👍1

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

royGil on 7 Dec 2018

👍2

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?

kentcdodds on 7 Dec 2018

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.