Возникли проблемы при проверке оператора if во время тестирования Enzyme / Jest / React - PullRequest
0 голосов
/ 17 июня 2019

Я пытаюсь получить покрытие тестирования выше 80%, и эта линия предотвращает это. Я не могу заставить оператор if срабатывать при тестировании приложения. Поведение работает, как и ожидалось, в представлении клиента, но в тестовом файле происходит сбой, и я не могу понять, почему.

Я хочу протестировать функцию handleClickOutside.

class UserInfo extends Component {
  constructor(props) {
    super(props);
    this.popup = null;
    this.state = { user: this.props.user, showMenu: false };

    this.handleToggleTheme = this.handleToggleTheme.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.handleClickOutside, true);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClickOutside, true);
  }

  handleClickOutside = event => {
    const domNode = ReactDOM.findDOMNode(this.popup);
    console.log(domNode);
    console.log(event);
    if (domNode && !domNode.contains(event.target)) {
      console.log('Hit');
      this.setState({ showMenu: false });
      event.stopPropagation();
    }
  };

  handleToggleTheme() {
    this.props.onToggleTheme();
  }

  render() {
    return (
      <Root>
        <ThemeControlWrapper>
          <Switch onChange={this.handleToggleTheme} />
          <ThemeIcon src={SunIcon} alt="Light Mode Icon" />
        </ThemeControlWrapper>
        <UserInfoWrapper
          ref={userInfo => {
            this.anchor = userInfo;
          }}
          onClick={() =>
            this.setState(state => {
              return { showMenu: !state.showMenu };
            })
          }
          className={this.props.className}
        >
          <UserPhoto src={Config.PublicFolder + "/user/photo.jpg"} />
          <UserName>{this.state.user.name}</UserName>
          {this.state.showMenu ? <ArrowUpIcon /> : <ArrowDownIcon />}
        </UserInfoWrapper>
        <Popup
          anchor={this.anchor}
          show={this.state.showMenu}
          ref={popupElement => {
            this.popup = popupElement;
          }}
        >
          <Menu>
            <MenuItem>
              <LogoutIcon />
              <LogoutText>Logout</LogoutText>
            </MenuItem>
          </Menu>
        </Popup>
      </Root>
    );
  }
}

Вот тест для этой функции

const defaultUser = {
  appsWithDashboard: apps
};

const withDualThemeAndUserWrapper = ({
  WrappedComponent,
  customUser = { permissions: [], roles: [], partitions: [] }
}) => props => (
  <DualThemeProvider>
    <UserProvider user={customUser}>
      <WrappedComponent {...props} />
    </UserProvider>
  </DualThemeProvider>
);

let WithThemeAndUserContext = withDualThemeAndUserWrapper({
  WrappedComponent: () => <UserInfo user={{ name: "Andrew" }} />,
  customUser: defaultUser
});

let wrapper;

describe("handleClickOutside", () => {
  test("Should fire handleClickOutside", () => {

  wrapper.instance().handleClickOutside({ 
    target : <div className="hello">Hello</div>});
  expect(wrapper.state("showMenu")).toBeTruthy();
  wrapper.instance().handleClickOutside({ 
    target : <div className="goodbye">Goodbye</div>});
  expect(wrapper.state("showMenu")).toBeFalsy();
  })
});

Как мне запустить тест, чтобы он проверял, что handleClickOutside выполняет все возможные результаты. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...