problem with material-ui elements #234
Description
react-testing-libraryversion: 5.3.1reactversion: 16.7.0-alpha.2nodeversion: 10npm(oryarn) 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.