Ошибка 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();
});
});