Flash消息测试失败，并带有react-testing-library / material-ui

Question

我正在测试'loginContainer.test.js'中的登录提交失败时是否呈现错误刷新消息。即时消息是一个材料UI小吃栏组件，会弹出几秒钟。

我现在所在的位置是成功触发了“单击提交按钮事件”，并且“登录操作”失败了。我发现历史记录道具的位置与“ / login”匹配，而不是“ /”，后者是登录成功后的重定向页面。

我已经尝试通过几种方式获取Flash消息文本。 1.

const getById = queryByAttribute.bind(null, 'id');
const clientMsg = getById(container, 'client-msg');
console.log('clientMsg: ', clientMsg);

1. getByTestId('client-msg');
2. getByText('아이디 또는 비밀번호 오류입니다.').toBeInTheDocument();

3. getByText('아이디 또는 비밀번호 오류입니다.').toBeVisible();

   • flash消息是可重用的组件，已导入所有其他组件（App.js）的父组件中。 [文件结构] 组件/身份验证/ loginContainer 共享/消息/ snackbarContainer

loginContainer.test.js

const { component, submitButton, usernameInput, passwordInput } = setUp();
  const { container, getByText } = component;

  fireEvent.change(usernameInput, { target: { value: username } });
  fireEvent.change(passwordInput, { target: { value: '-1' } });

  fireEvent.click(submitButton);
  await wait(() => {
    expect(mockUserLogin).toHaveBeenCalledTimes(1);
  });

  const unlisten = history.listen(expect(location.pathname).toMatch('/login'));
  unlisten();

  getByText('아이디 또는 비밀번호 오류입니다.').toBeInTheDocument();
  getByText('아이디 또는 비밀번호 오류입니다.').toBeVisible();

共享的/消息/快餐栏ContentWrapper.js

import React from 'react';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import { withStyles } from '@material-ui/core/styles';
/* --- Components --- */
import Icon from '../../../assets/icons';
import IconButton from '../form/iconButton';

const color = {
  success: '#43A047',
  warning: '#FFA000',
  error: '#ed4337',
  info: '#2196F3',
};

const styles = theme => ({
  success: { backgroundColor: '' },
  error: { backgroundColor: '' },
  info: { backgroundColor: '' },
  warning: { backgroundColor: '' },
  container: {},
  messageBox: {},
  icon: {},
});

const SnackbarContentWrapper = ({ classes, message, variant, onClose }) => {
  const iconColor = color[variant];
  return (
    <SnackbarContent
      id="client-msg"
      className={`${classes[variant]} ${classes.container}`}
      aria-describedby="client-msg"
      message={
        <span id="client-msg" className={classes.messageBox}>
          <div className={classes.icon}>
            <Icon
              name={variant}
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fillOuter="#ffffff"
              fillInner={iconColor}
            />
          </div>
          {message}
        </span>
      }
      action={[
        <IconButton
          name="close"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          type="client-msg"
          handleClick={onClose}
        />,
      ]}
    />
  );
};

共享的消息/自定义的小吃吧

import SnackbarContentWrapper from './snackbarContentWrapper';

const CustomizedSnackbar = ({ show, variant, message, removeFlashMessage }) => {
  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    removeFlashMessage();
  };
  return (
    <Snackbar
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
      open={show}
      autoHideDuration={4000}
      onClose={handleClose}
    >
      <SnackbarContentWrapper
        onClose={handleClose}
        variant={variant}
        message={message}
      />
    </Snackbar>
  );
};
```

## loginContainer.js
```
import LoginForm from './loginForm';
/* --- Actions --- */
import { userLogin } from '../../../actions/authAction';
import { addFlashMessage } from '../../../actions/messageAction';

export const Login = ({
  history,
  // actions
  userLogin,
  addFlashMessage,
}) => {
  const handleSubmit = async (values) => {
    const { username, password } = values;

    try {
      const token = await userLogin(username, password);
      history.push('/');
    } catch (error) {
      addFlashMessage('error', '아이디 또는 비밀번호 오류입니다.');
    }
  };

  return (
    <div>Login Form component is here</div>
  );
};

const mapDispatchToProps = dispatch => ({
  userLogin: (username, password) => dispatch(userLogin(username, password)),
  addFlashMessage: (variant, message) =>
    dispatch(addFlashMessage(variant, message)),
});
```

I am expecting to have '아이디 또는 비밀번호 오류입니다.' error message text for a couple of seconds when login submit fails.