Test cases treat html elements as an active state

[trentis]

• react version: 18
• @testing-library/react version: 14
• @testing-library/jest-dom version: 5.16.5

Relevant code or config:

import React from 'react';
import { render, screen } from '@testing-library/react';

import '@testing-library/jest-dom';

describe('a href testing', () => {
  it('loads the default link',  async () => {
    render(
        <>
        <style dangerouslySetInnerHTML={{__html:`
        .test{
          background: green
        }
        .test:active {
            background: red
          }`}} />
        <a href="#" data-testid="test" className="test">
          test
        </a>
        </>
    );
    expect(screen.getByTestId('test')).toHaveStyle('background: green')
  });
})

What you did:

Hey All, sorry if this is the wrong space but I recently just updated the version of our testing frameworks and every element that has an active state is failing as it seems to already apply the active styling. For an example the code above when tested complains that the background is actually red when I think it should be green by default?

Problem description:

My tests to check the default styling of a button are breaking because the tests now treat everything as an active state which has different styling

Suggested solution:

I don't have a suggested solution but the interim I can come up with is use an act() and just focus a different button to test the normal styling of a button.

[DylanWard14]

I was able to reproduce this. Here is a link to the stackblitz

https://stackblitz.com/edit/vitejs-vite-ifajxo?file=src%2Fcomponents%2FButton.test.tsx

Is it recommended to use testing library to test styles or are we better off testing styles using something like cypress instead?

[sachin-jha1]

Did you able to find what's causing this issue?
The UTs started failing few days back, the package update that I see recently is:
https://www.npmjs.com/package/@testing-library/jest-dom?activeTab=versions
But reverting the version to previous build does not solve the issue.

[Nebiyu-Talefe]

I'm also facing a similar situation and I had to find a hacky way to test my component. I also found out it's not just the :active pseudo selector that's being applied, but also :hover pseudo selector is being applied as well. It's really strange.

[MatanBobi]

Thanks @trentis for reporting this and @DylanWard14 for the reproduction, it was helpful.
From a short debug of jest-dom, this looks like an issue with JSDOM since we call getComputedStyles and it returns background: red;. I also tried to do it without a wrapping renderer (e.g. RTL) and the same happens:

// import React from 'react';
import { getQueriesForElement } from "@testing-library/react";
import "@testing-library/jest-dom";

function render(
  html: string,
  { container = document.createElement("div") } = {}
) {
  container.innerHTML = html;
  document.body.appendChild(container);
  const containerQueries = getQueriesForElement(container);
  return { container, ...containerQueries };
}

test("testing", async () => {
  const { getByTestId } = render(`<style>
  .test{
    background: green
  }
  .test:active {
      background: red
  }
  .test:focus {
    background: red
}
</style><button class="test" data-testid="test" />`);
  const element = getByTestId("test");
  expect(element).toHaveStyle("background: green");
});

jest-environment-jsdom is using JSDOM version 20, at the moment there's already version 22 and they don't support versions under that.
One last thing, testing for styles as part of unit/integration tests is probably something I'd try to avoid since getComputedStyles in JSDOM and happy-dom is not a full implementation as it is in the browser. For styles checking there are different tools like E2E and visual regression tools.

I'm closing this since there's nothing else we can do in testing-library. If you still want to continue with this approach, I'd try happy-dom or migrating to JSDOM 22 to see if this issue still occurs.
Thanks and sorry again for pushing you to the next package in line.

[gabrielmicko]

Same issue with

expect(screen.queryByRole('button')).toHaveStyle({
      'background-color': Colors.primary100,
    });

[MatanBobi]

@gabrielmicko, as I commented above, there's nothing we can do in testing library since we're not the ones setting the active state, it's the test environment. Please read above.

[blake-discover]

For what it's worth, I have an issue open in JSDOM's repo:
jsdom/jsdom#3607