使用 React 测试库和 findByRole 测试是否存在 React-modal

Question

我正在尝试使用 React 测试库和 findByRole 来测试我的模式是否存在。我不断收到一条错误消息：Unable to find role="dialog"尽管我可以清楚地看到它在测试控制台中打印出来。

\n

这是我的测试：

\n

import React from "react";\nimport {\n    render,\n    screen,\n    within,\n    fireEvent, cleanup, waitFor\n} from \'@testing-library/react\';\nimport \'@testing-library/jest-dom\';\nimport "@testing-library/react/dont-cleanup-after-each";\nimport Modal from \'react-modal\';\n\nimport PackagerModal from \'./PackagerModal\';\n\nconst mockedEmptyFn = jest.fn();\n\nconst mockBaseProps = {\n    openPackager: true,\n    setOpenPackager: mockedEmptyFn,\n    activeOrder: {\n        // ... // lots of irrelevant properties here\n        ]\n    },\n    setOrders: mockedEmptyFn,\n    customStyles: {\n        content: {\n            backgroundColor: "var(--color-primary)",\n            border: "1px solid #ccc",\n            boxShadow: "-2rem 2rem 2rem rgba(0, 0, 0, 0.5)",\n            color: "rgba(var(--RGB-text), 0.8)",\n            filter: "blur(0)",\n            fontSize: "1.1em",\n            fontWeight: "bold",\n            margin: "50px auto",\n            opacity: 1,\n            outline: 0,\n            position: "relative",\n            visibility: "visible",\n            width: "500px"\n        },\n        overlay: {\n            backgroundColor: "rgba(255, 255, 255, 0.9)"\n        }\n    },\n    readOnly: false,\n    setReadOnly: mockedEmptyFn,\n};\n\nModal.setAppElement(\'body\');\n\n\nconst Component = (props) =>    <PackagerModal {...mockBaseProps} {...props} />\n\ndescribe(\'Packager Modal tests with editable inputs\', () => {\n    afterAll(() => {\n        cleanup();\n    });\n\n\n    test(\'Should show packager modal\', async () => {\n        render(\n            <Component/>\n        );\n        // screen.debug();\n        const modalWindow = await screen.findByRole(\'dialog\');\n        expect(modalWindow).toBeInTheDocument();\n    });\n});\n

\n

这是我的模式：

\n

import ReactModal from \'react-modal\';\nimport React, { useEffect, useRef, useState } from \'react\';\nimport CloseButton from \'./CloseButton\';\nimport PropTypes from \'prop-types\';\n\nconst PackagerModal = (props) => {\n    const {\n        openPackager,\n        setOpenPackager,\n        activeOrder,\n        setOrders,\n        customStyles,\n        readOnly,\n        setReadOnly,\n    } = props;\n\n    const cleanUpModal = () => {\n        setReadOnly(false);\n        setUserInput(initialState);\n    };\n\n    return (\n        <ReactModal\n            isOpen={openPackager}\n            style={customStyles}\n            className={\'order-details-modal\'}\n            closeTimeoutMS={1000}\n            onAfterClose={cleanUpModal}\n        >\n            <CloseButton setOpenModal={setOpenPackager} />\n            <h2 className={\'title\'}>Packager Order Checklist</h2>\n        </ReactModal>\n    );\n};\n\nPackagerModal.propTypes = {\n    openPackager: PropTypes.bool.isRequired,\n    setOpenPackager: PropTypes.func.isRequired,\n    customStyles: PropTypes.object.isRequired,\n    activeOrder: PropTypes.object.isRequired,\n    setOrders: PropTypes.func.isRequired,\n    readOnly: PropTypes.bool.isRequired,\n    setReadOnly: PropTypes.func.isRequired,\n};\n\nexport default PackagerModal;\n

\n

最后，这是我在测试控制台中看到的一些输出：

\n

 \xe2\x97\x8f Packager Modal tests with editable inputs \xe2\x80\xba Should show packager modal\n\n    Unable to find role="dialog"\n\n    Ignored nodes: comments, script, style\n    <body\n      aria-hidden="true"\n      class="ReactModal__Body--open"\n    >\n      <div\n        data-react-modal-body-trap=""\n        style="position: absolute; opacity: 0;"\n        tabindex="0"\n      />\n      <div />\n      <div\n        data-react-modal-body-trap=""\n        style="position: absolute; opacity: 0;"\n        tabindex="0"\n      />\n      <div\n        class="ReactModalPortal"\n      >\n        <div\n          class="ReactModal__Overlay ReactModal__Overlay--after-open"\n          style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.9);"\n        >\n          <div\n            aria-modal="true"\n            class="ReactModal__Content ReactModal__Content--after-open order-details-modal"\n            role="dialog"\n            style="border: 1px solid #ccc; box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.5); filter: blur(0); font-size: 1.1em; font-weight: bold; margin: 50px auto; opacity: 1; outline: 0; position: relative; visibility: visible; width: 500px;"\n            tabindex="-1"\n          >\n          ...\n

\n

Answer 1

看起来你的测试主体被设置为隐藏 - aria-hidden="true"（不知道为什么，因为我不熟悉这个包）。React 测试库非常注重可访问性，因此默认情况下它会忽略任何不可访问的元素。

{ hidden: true }尝试使用选项查询您的元素

const myModal = getByRole('dialog', { hidden: true });