React - тестирование внешнего интерфейса с помощью Jest

Question

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

Вот сообщение:

Невозможно найти элемент с текстом: пожалуйста, просмотрите платежные реквизиты ...

Вот что у меня есть для теста:

import React from 'react';
import { render, cleanup, waitForElement } from 'react-testing-library';

// React Router
import { MemoryRouter, Route } from "react-router";

import Show from './Show';


test('it shows the offer', async () => {

  const { getByText } = render(
      <MemoryRouter initialEntries={['/booking-requests/20-A1-C2/offer']}>
        <Route
          path="/booking-requests/:booking_request/offer"
          render={props => (
            <Show {...props} />
          )}
        />
      </MemoryRouter>
  );

  //displays the review prompt
  await waitForElement(() => getByText('Please review your billing details, contract preview and Additions for your space. Once you’re happy, accept your offer'));

//displays the confirm button
 await waitForElement(() => getByText('Confirm'));
});

и это компонент:

// @flow
import * as React from 'react';
import i18n from 'utils/i18n/i18n';
import { Btn } from '@appearhere/bloom';
import css from './Show.css';
import StepContainer from 'components/Layout/DynamicStepContainer/DynamicStepContainer';

const t = i18n.withPrefix('client.apps.offers.show');

const confirmOfferSteps = [
  {
    title: t('title'),
    breadcrumb: t('breadcrumb'),
  },
  {
    title: i18n.t('client.apps.offers.billing_information.title'),
    breadcrumb: i18n.t('client.apps.offers.billing_information.breadcrumb'),
  },
  {
    title: i18n.t('client.apps.offers.confirm_pay.title'),
    breadcrumb: i18n.t('client.apps.offers.confirm_pay.breadcrumb'),
  },
];

class Show extends React.Component<Props> {
  steps = confirmOfferSteps;

  renderCtaButton = (): React.Element<'Btn'> => {
    const cta = t('cta');

    return <Btn className={css.button} context='primary'>
      {cta}
    </Btn>
  };

  renderLeftContent = ({ isMobile }: { isMobile: boolean }): React.Element<'div'> => (
    <div>
      <p>{t('blurb')}</p>

      {!isMobile && this.renderCtaButton()}
    </div>
  );

  renderRightContent = () => {
    return <div>Right content</div>;
  };

  render() {
    const ctaButton = this.renderCtaButton();

    return (
      <StepContainer
      steps={this.steps}
      currentStep={1}
      ctaButton={ctaButton}
      leftContent={this.renderLeftContent}
      rightContent={this.renderRightContent}
      footer={ctaButton}
    />
    );
  }
}

export default Show;

что мне не хватает? Будем весьма благодарны за предложения, что еще добавить в мой тестовый файл!