Skip to content

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

@hyemingwaylikesdev

Description

@hyemingwaylikesdev

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 : )

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions