You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
it.only('example',()=>{render(<div><divdata-testid="root"className="group/item"><divdata-testid="test1"className="invisible group-hover/item:visible">
test
</div></div></div>,);letel=screen.getByTestId('root');expect(el).toBeVisible();expect(screen.getByTestId('test1')).not.toBeVisible();});
it gives:
Error: expect(element).not.toBeVisible()
Received element is visible:
<div
class="invisible group-hover/item:visible"
data-testid="test1"
/>
The text was updated successfully, but these errors were encountered:
Following the example from tailwindcss: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups. Item that should be invisible is still visible.
just to be sure the config of the tailwind is ok I followed https://stackoverflow.com/questions/71010317/react-testing-library-cant-read-styles-using-tailwind-css-classes
"jsdom": "22.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "14.0.0",
"tailwindcss": "^3.3.3",
Relevant code or config:
it gives:
The text was updated successfully, but these errors were encountered: