Проверьте, отображается ли подключенный компонент с избыточностью

Question

У меня есть этот презентационный компонент, который включает LoginForm, который использует избыточное соединение ... когда я пытаюсь увидеть, есть ли компонент с помощью wrapper.debug () вместо того компонента, который я вижу: <Connect(Component) />

Что мне нужно сделать, чтобы увидеть актуальный LoginForm и проверить его длину?

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

const LoginSection = ({ intl }) => (
  <div className={styles.loginSection}>
    <div className={styles.wrapper}>
      <div className={styles.form}>
        <p className={styles.title}>
          <FormattedMessage
            id="Dashboard.login.title"
            defaultMessage="Login to an account"
          />
        </p>
        <LoginForm />
        <p className={styles.createAccountWrapper}>
          <span className={styles.dontHaveAccount}>
            <FormattedMessage
              id="Dashboard.login.subline"
              defaultMessage="Dont have an account?"
            />
          </span>
          <a
            className={styles.createAccount}
            href={`${localeToDomainMap[intl.locale]}/register`}
          >
            <span className={styles.createOneHere}>
              <FormattedMessage
                id="Dashboard.login.createAccount"
                defaultMessage="Create one here."
              />
            </span>
          </a>
        </p>
      </div>
    </div>
  </div>
);

и это мой тест:

const setup = (newProps) => {
  const props = {};

  const wrapper = shallow(<LoginSection {...props} />);

  return {
    wrapper,
    props,
  };
};

describe('LoginSection', () => {

  test('that it contains LoginForm', () => {
    const { wrapper } = setup();
    console.log(wrapper.debug());
    expect(wrapper.find('.loginFrom')).toEqual(1);
  });

});

и это результат wrapper.debug():

  <div className="loginSection">
   ... other stuff here ...
        <Connect(Component) />
  ... other stuff here ...
  </div>