-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Test cases treat html elements as an active state #1225
Comments
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? |
Did you able to find what's causing this issue? |
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. |
Thanks @trentis for reporting this and @DylanWard14 for the reproduction, it was helpful. // 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");
});
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 |
Same issue with
|
@gabrielmicko, as I commented above, there's nothing we can do in testing library since we're not the ones setting the |
For what it's worth, I have an issue open in JSDOM's repo: |
react
version: 18@testing-library/react
version: 14@testing-library/jest-dom
version: 5.16.5Relevant code or config:
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.
The text was updated successfully, but these errors were encountered: