проблема, связанная с реакцией-тестированием-библиотекой с Material-UI - PullRequest
Новая
       12

проблема, связанная с реакцией-тестированием-библиотекой с Material-UI

0 голосов
/ 05 декабря 2018

Пытаюсь написать мой первый тест с помощью библиотеки response-testing-library, но похоже, что он не сможет получить правильный элемент material-ui.

https://codesandbox.io/s/lx5nl1839z

Я получаю ошибкусообщение о том, что событие никогда не было запущено.

Ожидается, что фиктивная функция была вызвана один раз, но она была вызвана ноль раз.

Когда я заменяю button на обычную кнопку вместо Button сМатериал UI, то это работает.

Вот мой тест 

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',
  });
});

Вот мой компонент: 

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>
  );
};

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Ваши текстовые поля не контролируются.Вы должны передать фактическое значение и установить фактическое значение в событии изменения.Вы дважды запускаете отправку в настоящее время в своих тестах.

Выполнение тестов с этими исправлениями приводит к правильному выводу консоли, но по какой-то причине кодыandbox игнорирует совпадение шуток.Я не знаю, что там происходит, но с вышеуказанными исправлениями суть этого работает.

0 голосов
/ 07 декабря 2018

Во-первых, codesandbox не надежен ...

codesandbox как-то запускает тесты в браузере, а не в jsdom.

Вот проблема: https://github.com/kentcdodds/react-testing-library/issues/234

Суть в том, что он щелкает по диапазону submit, а не по кнопке.Это должно было всплыть, но это не так.

Вот рабочий пример с моим локальным сервером с 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);
    }
  });
0 голосов
/ 06 декабря 2018

Я видел много людей, имеющих проблемы с Material-UI.Я предполагаю, что Button пытается сделать что-то необычное и нарушает нормальный поток событий HTML.

Мой совет - использовать jest.mock () и mock Button длявместо этого выведите button.

...