V5 mirgation question - Modal TrapFocus component causing issues with Jest 29

[LukasStordeur]

Hi !

We are currently in the process of upgrading to the new version. So far it was going smoothly, thanks for the mods, they work amazingly.
Whenever the modal component is being used in our unit tests, the tests will fail on the inert attribute selector not being valid.

We are using Jest/React-Testing library.

I suspect it relates to focus-trap/tabbable#926

JSDOM looks like it does not support :not([inert] *) (but does support :not([inert]).

If I add the disableFocusTrap on the modal, the error will be gone. (This isn't the ideal solution, but it's a temporary workaround)

This is the error stacktrace:

SyntaxError: 'slot):not([inert]' is not a valid selector

at emit (node_modules/nwsapi/src/nwsapi.js:557:17)
      at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1400:9)
      at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:760:17), <anonymous>:3:105)
      at collect (node_modules/nwsapi/src/nwsapi.js:1552:21)
      at Object._querySelectorAll [as select] (node_modules/nwsapi/src/nwsapi.js:1509:36)
      at HTMLDivElementImpl.querySelectorAll (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:78:26)
      at HTMLDivElement.querySelectorAll (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1119:58)
      at querySelectorAll (node_modules/tabbable/src/index.js:86:8)
      at Object.getCandidates [as tabbable] (node_modules/tabbable/src/index.js:628:18)
      at tabbable (node_modules/focus-trap/index.js:288:29)
          at Array.map (<anonymous>)
      at map (node_modules/focus-trap/index.js:287:46)
      at Object.updateTabbableNodes [as activate] (node_modules/focus-trap/index.js:723:9)
      at FocusTrapBase.componentDidMount (node_modules/@patternfly/react-core/src/helpers/FocusTrap/FocusTrap.tsx:48:22)
      at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23310:28)
      at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9)
      at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:24612:3)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26823:5)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:26117:3)
      at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:12042:22)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26959:3)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:63:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
      at render (node_modules/@testing-library/react/dist/pure.js:246:10)

Is this something I'd rather make a ticket for? Or is this a known issue that will be tackled upon updating the dependencies?

[nicolethoen]

I wonder if @thatblindgeye and @wise-king-sullyman have any insight

[thatblindgeye]

Hey @LauraStordeur , do you have a link or code snippet of some examples of unit tests that are failing? Based on the syntax error that you pasted, my first thought is that maybe it's a typo, slot):not([inert] instead of slot:not([inert]), but curious how the modal is setup in your unit tests.

[LukasStordeur]

Hey @thatblindgeye ! Thanks for the reply, we are simply consuming the modal and testing if it shows up with some text/ or some content.
You can find an example here, our codebase is open sourced, but atm we have an internal dependency with authentication that would break the install if you try to install the project.

test-file
file with the modal implementation

The tests would fail at the render(component) step with mentioned error if I remove the ´disableFocusTrap´ attribute. All the tests where a modal is being triggered would break, while they didn't break on V4.

[thatblindgeye]

Thanks for the links @LauraStordeur ! Looks like the first one (the test-file) is the same as the "file with modal implementation". Can you confirm the link URLs?

EDIT: one suggestion that was brought up was updating the version of @testing-library/react to v14

[LukasStordeur]

Hey @thatblindgeye I updated the links, my bad. You have the file where the modal is being implemented, and then the test file.

Updating @testing-library/react to V14 didn't resolve anything either. It still breaks with the same error when the trapFocus is active.

[thatblindgeye]

@LauraStordeur We tried looking into this a bit further. Based on some of the links below, it seems like there's still an issue with tabbable and nwsapi.

We believe the best practice would be to mock out dependencies if able. If you'd like to investigate a bit further, here are some of the links we came across:

focus-trap/tabbable#982
dperini/nwsapi#83
focus-trap/focus-trap-react#986
dperini/nwsapi#83 (comment)

[LukasStordeur]

Okay! Thanks, I'll try it out after we finished upgrading and replacing deprecated elements!