I'm using TailwindCSS to implement a React App, and Jest to test it. I expect changing the window size can cause some elements to appear and disappear. Then I realized jsDom doesn't load TailwindCSS, and I followed React testing library can't read styles using Tailwind CSS classes and successfully injected the compiled CSS into document.head of jsDom. However, after I changed the window size by using
window.innerWidth = 480;
window.dispatchEvent(new Event("resize"));
expect(window.innerWidth).toBe(480); // This passes
expect(screen.getByTestId("nav-bar-bottom")).not.toBeVisible(); // fails
the element that should be gone still exists.
I hear someone mentioned jsDom doesn't support responsive test. So how responsive tests should be conducted then?
