Ошибка Jest: Your focus-trap must have at least one container with at least one tabbable node in it at all times

Пишу тесты для React компонентов на Jest. Столкнулась с ошибкой " Your focus-trap must have at least one container with at least one tabbable node in it at all times". Я пробовала добавить проверку фокуса на элементе

await waitFor(() => expect(screen.getByTestId('continue')).toHaveFocus());

Но это не помогло. Как можно исправить эту ошибку?

Код компонента:

function SuccessCommentAddPopup({onSuccessComment}: SuccessCommentAddPopupProps): JSX.Element {
 
  return (
    <AriaModal
      titleText='add comment success'
      initialFocus="#continue"
    >
      <div style={{position: 'relative', width: '550px', height: '410px', marginBottom: '50px'}}>
        <div className={style.modal}>
          <div className={style.modalWrapper}>
            <div className={style.modalOverlay} data-close-modal></div>
            <div className={style.modalContent}>
              <svg className={style.modalIcon} width="26" height="20" aria-hidden="true">
                <use xlinkHref="#icon-success"></use>
              </svg>
              <p className={style.modalMessage}>Спасибо за ваш отзыв</p>
              <div className={style.modalButtonContainer}>
                <button
                  id='continue'
                  data-testid='continue'
                  className={style.modalButton}
                  onClick={()=>{
                    onSuccessComment(false);
                  }}
                >
                Продолжить покупки
                </button>
              </div>
              <button
                className={style.modalCloseBtn}
                type="button"
                aria-label="Close"
                onClick={()=>{
                  onSuccessComment(false);
                }}
              >
                <span className={style.buttonCrossIcon}>
                </span><span className={style.modalCloseBtninteractiveArea}></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </AriaModal>
  );
}

export default SuccessCommentAddPopup;

Код теста:

const history = createMemoryHistory();
history.push('/guitars/1');


describe('Component: SuccessCommentAddPopup', () => {
  it('Компонент отрисовывается корректно', async () => {
    render(
      <HistoryRouter history={history}>
        <SuccessCommentAddPopup
          onSuccessComment={jest.fn()}
        />
      </HistoryRouter>,
    );
    await waitFor(() => expect(screen.getByTestId('continue')).toHaveFocus());
    expect(screen.getByText('Спасибо за ваш отзыв!')).toBeInTheDocument();
  });
});

Ответы (0 шт):