[v4] Jest/React Testing Library stopped detecting styling via classes after upgrading from v3

[oskarwilczynski]

What version of Tailwind CSS are you using?

v4.0.6

What build tool (or framework if it abstracts the build tool) are you using?

Jest 29.7.0
@testing-library/react 16.0.0
jest-environment-jsdom
happy-dom

What version of Node.js are you using?

22.13.1

What operating system are you using?

macOS

Describe your issue

I have an issue with detecting styling with RTL after upgrading to v4, looks like RTL has issues with picking up styles from Tailwind classes. When using helpers such as toHaveStyle or toBeVisible, it appears that components are not styled at all:

I tried a couple of test environments for Jest and none of them worked -- when using jest-environment-jsdom there is an accompanying error Error: Could not parse CSS stylesheet, with happy-dom there's no such error, but the tests that involve styling checks still don't pass.

To set up components for tests, I use the following config that injects CSS output file created via npx @tailwindcss/cli, it worked completely fine on v3:

export const render = (
  ui,
  {
    store = createTestStore(),
    route = '/',
    history = defaultHistory,
    customRouter = false,
    deviceWidth = 1024,
    ...renderOptions
  } = {},
) => {
  const Wrapper = ({ children }) =>
    wrapTestRender(children, { store, history, deviceWidth, customRouter })

  if (!customRouter) {
    history.replace(route)
  }

  const view = rtlRender(ui, { wrapper: Wrapper, ...renderOptions })

  const style = document.createElement('style')
  style.innerHTML = fs.readFileSync(
    'app/globalStyles/tailwind-output.css',
    'utf8',
  )
  document.head.appendChild(style)

  return view
}

Has anybody successfully set up Jest/RTL after migrating to v4? Thanks!

[philipp-spiess]

Hey! Could be that happy-dom is not happy with any of the CSS we emit but we mainly focus our output around browsers (https://tailwindcss.com/docs/compatibility#browser-support) so I am not sure what we could do different here. Perhaps, if you want to test computed stylesheets in your app, something like a headless browser (e.g. via playwright) would be more reliable?

[oskarwilczynski]

Hey, thanks for the answer. After more investigation, all test environments, that I've tried, have an issue with @layer which is quite weird because they claim support for it and other modern CSS solutions. For example, when I have such test:

render(<Component />)

expect(screen.getByTestId('title')).toHaveStyle('background-color: rgba(118, 138, 165, 0.1)')

It doesn't pass with such stylesheet attached:

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  .bg-grey-200 {
    background-color: rgba(118, 138, 165, 0.1);
  }
}

But it does with this one:

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
.bg-grey-200 {
  background-color: rgba(118, 138, 165, 0.1);
}

So it looks like test environment silently ignore whole CSS stylesheet if it contains @layer, but even removing all @layer instances is not making it pass, I guess it's generally not compatible with some newish stuff used in Tailwind v4 stylesheet.

For now, I'll just move all styling checks to toHaveClass check -- it seems to be against RTL paradigm of testing what the end user sees, but currently I don't see any other solution and, in the end, I want to test class attachment based on various conditions being met.