import React , { forwardRef , createRef } from "react" ; import type { ForwardedRef } from "react" ; import { render , screen } from "@testing-library/react" ; import { withTheme } from "." ; const message = "with theme!" ; const styles = { __digest : "bfa81d" , __template ( ) { return ".ods-8129bf{color: red};" ; } , red : "ods-8129bf" } ; const theme = ( ) => ( { } ) ; const tree = ( { ... props } = { } ) => { const Composed = withTheme ( theme , styles ) ( forwardRef ( ( props , ref ) => ( < span ref = { ref } className = { styles . red } > { props . message } < /span>))); return < Composed { ... props } message = { message } / > ; } ; describe ( "withTheme" , ( ) => { it ( "renders composed component visibly into the document" , ( ) => { render ( tree ( ) ) ; expect ( screen . getByText ( message ) ) . toBeVisible ( ) ; } ) ; it ( "renders composed styles into the document" , ( ) => { render ( tree ( ) ) ; expect ( screen . getByText ( message ) ) . toHaveStyle ( { color : "red" } ) ; } ) ; it ( "forwards refs as expected" , ( ) => { const ref = createRef ( ) ; render ( tree ( { ref } ) ) ; expect ( ref . current ) . toBeInstanceOf ( HTMLSpanElement ) ; } ) ; it ( "hoists statics as expected" , ( ) => { const Component = withTheme ( theme , styles ) ( Object . assign ( ( ) => < div className = { styles . red } > { message } < /div>, { MyStatic : true } ) ) ; expect ( Component ) . toMatchObject ( { MyStatic : true } ) ; } ) ; it ( "assigns a theme static" , ( ) => { const Component = withTheme ( theme , styles ) ( ( ) => < div />); expect ( Component . theme ) . toEqual ( styles . __digest ) ; } ) ; } ) ;