I have a React component that conditionally renders a <div> over the entire screen using position: fixed and a high z-index, making it so that any DOM elements underneath the div can't be interacted with. This is similar behavior to what you would see with a modal, where anything "underneath" the modal is non-interactive.
I'm trying to write a Storybook interaction test that renders a <button> in addition to my component and asserts that, when the component is active, the <button> is NOT clickable due to it being behind the fixed <div>.
I've tried using both fireEvent.click and userEvent.click from testing-library, but both of these appear to invoke the onClick event on my <button> regardless of whether or not my fixed <div> element is in place.
I don't seem to be able to make testing-library behave as if a real user is trying to click on the button with the mouse, because the expected behavior is that the onClick event should NOT be invoked.
Is it possible to test such behavior using testing-library. Can I somehow have it try to click at certain x,y coordinates on the screen, instead of the button directly?
