ContextQMD
Back to Styled Components

Find All

sections/api/test-utils/find-all.mdx

latest612 B
Original Source

findAll | v3

A convenience method to find all instances of a styled component's rendered DOM node within a given DOM root.

tsx
import styled from 'styled-components'
import { findAll } from 'styled-components/test-utils'

const Foo = styled.div`
  color: ${props => props.color};
`

/**
 * Somewhere in your app:
 *
 * ReactDOM.render(
 *   <main>
 *     <Foo color="red" />
 *     <Foo color="green" />
 *   </main>, document.body
 * );
 */

// retrieves a NodeList of instances of "Foo" in the body (querySelectorAll under the hood)
findAll(document.body, Foo) // NodeList<HTMLDivElement> | null