fix(TS): make wrapper allow a simple function comp

[kentcdodds]

What: This adds an option for the wrapper to use a simple function component

Why: Closes #965

How: Added the option to the types for render

Checklist:

• Documentation added to the
  docs site N/A
• Tests
• TypeScript definitions updated
• Ready to be merged
  

[kentcdodds]

I don't like merging my own PRs, especially in projects I'm not actively maintaining 😅 So I can wait until someone else can get around to this one. Thanks!

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f23919d:

Sandbox	Source
React	Configuration
react-testing-library-examples	Configuration

[codecov]

Codecov Report

Merging #966 (206757b) into main (a218b63) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              main      #966   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            4         4           
  Lines          140       140           
  Branches        26        26           
=========================================
  Hits           140       140           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a218b63...206757b. Read the comment docs.

[3imed-jaberi]

+1 🚀

[eps1lon]

Let me add a type test for this because the fix is simpler I believe.

[eps1lon]

Implicit children strikes again (DefinitelyTyped/DefinitelyTyped#34237):

React.ComponentType includes React.FunctionComponent which means the accepted props are { children?: React.ReactNode }. However, our Wrapper only accepts { children: React.ReactElement } props. So we could render <Wrapper>Some Child</Wrapper> which may not be implemented by the custom Wrapper component because now it receives { children: string }.

The proposed fix would not have fixed the linked issue (npm typecheck fails on ffa2221). dc03098 fixes the linked issue.

[kentcdodds]

LGTM 👍 Thanks!

[github-actions]

🎉 This PR is included in version 12.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[astorije]

Hi @eps1lon!

We currently have code that, once contrived a lot for the sake of sharing an example, looks somewhat like this:

import { PropsWithChildren } from 'react';

function Foo({ children }: PropsWithChildren<Bar>) {
  return (
    options?.wrapper ? (
      <options.wrapper>{children}</options.wrapper>
    ) : (
      children
    )
  );
}

PropsWithChildren comes from @types/react and is simply:

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

This worked fine with @testing-library/react v12.1.0, but starting in v12.1.2 we're seeing the following, after the type change in this PR:

error TS2322: Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
  Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.

             <options.wrapper>{children}</options.wrapper>

What would be your recommendation here?

Should we simply change the code above into <options.wrapper><>{children}</></options.wrapper>?

(It seems this discussion with @drzamich is also relevant: https://github.com/testing-library/react-testing-library/pull/973/files#r754242764)

Thank you! ❤️

[github-actions]

🎉 This PR is included in version 13.0.0-alpha.7 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀