Having trouble testing the if statement while testing Enzyme/Jest/React

I am trying to get the testing coverage above 80% and this line is preventing this from happening. I can't seem to get the if statement to fire when testing the application. The behavior is working as expected in the client view but it fails in the test file and I can't figure out why.

The 'handleClickOutside' function is the one I wish to test.

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

Here is the test for this function

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= />,
  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();
  })
});

How can I run the test so that it tests the 'handleClickOutside' executes all possible outcomes. Thanks