menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

React Testing Library, getByRole and media queries

November 16, 2020 at 4:14pm

React Testing Library, getByRole and media queries

November 16, 2020 at 4:14pm (Edited 2 years ago)
When running tests that use the RTL getByRole query, elements that are hidden by default but have a media query to make them visible do not get included unless I explicitly tell RTL to include hidden elements, even though the jest screen size when running tests would trigger the breakpoint. For example:
const Button = styled.button`
display: none;
@media (min-width: 768px) {
display: block;
}
`;
function App() {
return <Button>Hello, world</Button></>
}
And the test:
render(<App />);
// This fails
expect(screen.getByRole("button")).toBeInTheDocument();
// This works
expect(screen.getByRole("button", { hidden: true })).toBeInTheDocument();
I'm guessing jest does not support ? And how come that display: none even works? I thought CSS in jest was ignored!
No messages yet