ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k stars 183 forks source link

TypeScript type error with TwImportComponent in jest-testing-typescript #849

Open hyemingwaylikesdev opened 8 months ago

hyemingwaylikesdev commented 8 months ago

I'm using jest-testing-typescript from twin.macro example, but I've been facing a problem.

import tw, { styled } from 'twin.macro'

const StyledImportComponent = styled.h1(() => [tw`bg-red-500`])
const TwImportComponent = tw.div`bg-green-500`
const TwPropComponent = ({ text }: { text: string }) => (
  <div tw="bg-blue-500">{text}</div>
)

export default function Test({ text }: { text: string }) {
  return (
    <>
      <StyledImportComponent />
      <TwImportComponent />
      <TwPropComponent text={text} />
    </>
  )
}

It passed the test code, but TwImportComponent and TwPropComponent make a type error.

'TwImportComponent' cannot be used as a JSX component.
  Its type 'TwComponent<"div">' is not a valid JSX element type.
    Type 'TwComponent<"div">' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.ts(2786)

Is there a solution? Thank you for reading my issue : )