I am trying to test component’s visibility using Jest and react testing library.

Div that should be hidden:

<div data-testid="some-component" className="max-lg:hidden flex flex-wrap items-start justify-end gap-6 sm:gap-8 lg:contents"></div>

My test:

    Object.defineProperty(window, 'innerHeight', {
        writable: true,
        configurable: true,
        value: 300,
    });
    global.dispatchEvent(new Event('resize'));
    expect(window.innerHeight).toBe(300);
    expect(screen.getByTestId('some-component')).not.toBeVisible();

It seems to be resizing the window just fine because window size test passes however the visibility check fails. I think this has something to do specifically with Tailwind because I have other visibility tests in my code and they work just fine without tailwind.

Following advice from similar questions I added this to my package.json but it didn’t work:

  "jest": {
    "moduleNameMapper": {
      "\.css$": "identity-obj-proxy",
      "\.(css|less)$": "<rootDir>/node_modules/tailwindcss"
    }
  }