笑话错误：“您的焦点陷阱必须始终具有至少一个包含一个tabbable节点的容器。

Question

我正在用玩笑来编写React组件的测试。我无法在组件测试中修复错误。我试图将重点放在测试代码中：

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}>Thank's a lot!</p>
              <div className={style.modalButtonContainer}>
                <button
                  id='continue'
                  data-testid='continue'
                  className={style.modalButton}
                  onClick={()=>{
                    onSuccessComment(false);
                  }}
                >
                Close
                </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();
  });
});

Answer 1

@Ararat是正确的。我通过嘲笑tabbable： https://github.com/focus-trap /tabbable＃testing-in-jsdom

添加了：./< strong> mocks/tabable.js，以下内容：

// __mocks__/tabbable.js

const lib = jest.requireActual('tabbable');

const tabbable = {
   ...lib,
   tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
   focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
   isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
   isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
};

module.exports = tabbable;

我花了很多时间来弄清楚这一点，这就是为什么我分享！我在VUE 3项目中使用了@Vueus的Usefocustrap，由于缺少此缺少，我的Vue-testing-library组件测试破裂了！

Answer 2

您需要模拟 Tabbable 模块。检查此 link

Answer 3

您需要在 __模拟__ 文件夹中创建tabbanle.js文件，现在，如果您没有文件夹，则iDe inde inde in for __ test test __ test __ test __ 在我的存储库中，我会在我的存储库中添加了该文件夹 src/server/models/__模拟__/tabbable.js
是的，它类似于其他答案，但是在哪里丢失了文件夹信息，我花了很长时间才能弄清楚它，因此

在此处添加以下代码。

// __mocks__/tabbable.js

const lib = jest.requireActual('tabbable');

const tabbable = {
...lib,
tabbable: (node, options) => lib.tabbable(node, { 
 ...options, displayCheck: 'none' }),
 focusable: (node, options) => lib.focusable(node, { 
 ...options, displayCheck: 'none' }),
 isFocusable: (node, options) => lib.isFocusable(node, { 
 ...options, displayCheck: 'none' }),
 isTabbable: (node, options) => lib.isTabbable(node, { 
...options, displayCheck: 'none' }),
 };

 module.exports = tabbable;

只需保存文件并再次运行测试，错误就会神奇地消失。
更新后，我还写了有关所有其他笑话错误的帖子，您可以在此处查看 https：> https：> https：> https：> https： //medium.com/@arianallami/jest-update-466f08181d06

Answer 4

我们应该找到此功能的哪个分支返回true

在我的情况下

if (isNodeAttached(node)) {
  // this works wherever the node is: if there's at least one client rect, it's
  //  somehow displayed; it also covers the CSS 'display: contents' case where the
  //  node itself is hidden in place of its contents; and there's no need to search
  //  up the hierarchy either
  return !node.getClientRects().length;
}

，我们需要像这样嘲笑它

const getClientRects = HTMLElement.prototype.getClientRects
HTMLElement.prototype.getClientRects = function () {
  return {
    ...getClientRects.apply(this),
    length: 1
  }
}

Answer 5

对于Vite，您可以在直接安装组件时指定，按此评论：

<FocusTrap
  focusTrapOptions={{
    ...,
    tabbableOptions: {
      displayCheck: TEST_ENV ? 'none' : 'whatever you normally set it to, or undefined for the default'
    }
  }}
>
  <button>I'm trapped</button>
</FocusTrap>

不过，这对Vite的依赖关系无济于事。