使用带有 material-ui 的 react-testing-library 的问题

Question

Trying to write my first test with react-testing-library, but it seems like it would not grab the correct material-ui element.

https://codesandbox.io/s/lx5nl1839z

I get the error message saying the event was never fired.

Expected mock function to have been called one time, but it was called zero times.

When I change the button to a regular button instead of Button from material ui, then it works.

Here is my test

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 as any).value = 'leoq91@gmail.com';
  (password as any).value = 'password';
  fireEvent.click(getByText('Login'));


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

Here is my component:

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

  return (
    <Paper style={{ width: '400px', padding: '30px', margin: '0 auto' }}>
      <form
        onSubmit={e => {
          e.preventDefault();
          return login({ email, password });
        }}
      >
        <TextField
          id="email"
          label="Email"
          onChange={e => setEmail(e.target.value)}
          fullWidth
          variant="outlined"
          error={Boolean(getEmailError(email))}
          helperText={getEmailError(email)}
        />
        <TextField
          id="password"
          label="Password"
          type="password"
          style={{ marginTop: '10px' }}
          onChange={e => setPassword(e.target.value)}
          fullWidth
          variant="outlined"
        />
        <LoginError error={error} />
        <Button
          variant="contained"
          color="primary"
          type="submit"
          fullWidth
          // disabled={isDisabled(email, password)}
          style={{
            margin: '20px 0px',
          }}
        >
          Login
        </Button>
      </form>
      <Divider />
      <Typography style={{ margin: '10px auto' }}>Forgot password?</Typography>
    </Paper>
  );
};

Answer 1

First, codesandbox is not reliable...

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

Here is the issue: https://github.com/kentcdodds/react-testing-library/issues/234

Gist of it is because it is clicking the submit span, not the button. It should have bubbled up, but it isn't.

Here is a working example with my local server with Typescript.

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

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

    const emailNode = getByLabelText('Email');
    const passwordNode = getByLabelText('Password');

    if (
      emailNode instanceof HTMLInputElement &&
      passwordNode instanceof HTMLInputElement
    ) {
      fireEvent.change(emailNode, { target: { value: 'leoq91@gmail.com' } });
      fireEvent.change(passwordNode, { target: { value: 'password' } });
      const form = container.querySelector('form') as HTMLFormElement;
      form.dispatchEvent(new Event('submit'));
      expect(login).toHaveBeenCalledTimes(1);
      expect(login).toHaveBeenCalledWith({
        email: emailNode.value,
        password: passwordNode.value,
      });
    } else {
      expect(false);
    }
  });

Answer 2

Your TextFields are not controlled. You should pass the actual value and set the actual value in the change event. You fire submit twice currently in your tests.

Running the tests with those fixes has the correct console output but for some reason codesandbox ignores the jest matcher. I don't know what's going on there but with the above fixes the gist of it works.

Answer 3

I have been figthing over this for a while and finally got something to put the data-testid on the input and not the div around it that composed the TextField in material-ui.

You should set the data-testid in the inputProps like this:

<TextField
     type="password"
     variant="outlined"
     required
     value={password}
     onChange={onChangePassword}
     inputProps={{
         'data-testid': 'testPassword'
     }}
 />

And then you can access it in your test like that and simulate a new user input:

const passwordInput = getByTestId('testPassword');
fireEvent.change(passwordInput, { target: { value: VALID_PASSWORD } });

Answer 4

I saw many people having issues with material-ui. My guess is that Button is trying to do some fancy thing and breaks the normal HTML event flow.

My advice is to use jest.mock() and mock Button to render a button instead.