Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(render): Don't reject wrapper types based on statics #973

Merged
merged 3 commits into from Oct 3, 2021

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Oct 3, 2021

What:

Closes #970
Closes #972

Why:

Broke in #966

How:

Implicit children strikes yet again. While FunctionComponent adds implicit children, its propTypes do not so we didn't catch that issue. We don't care about React statics and just that we can pass it to createElement (or any JSX runtime).

Checklist:

  • [ ] Documentation added to the
    docs site
  • Tests
  • TypeScript definitions updated
  • Ready to be merged

@eps1lon eps1lon added bug Something isn't working TypeScript Related to TypeScript. Note: only certain maintainers handle TypeScript labeled issues. labels Oct 3, 2021
@@ -115,13 +115,32 @@ export function wrappedRenderB(
ui: React.ReactElement,
options?: pure.RenderOptions,
) {
const Wrapper: React.FunctionComponent = ({children}) => {
const Wrapper: React.FunctionComponent<{children?: React.ReactNode}> = ({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While FunctionComponent adds implicit children, its propTypes do not so we didn't catch that issue. Here we make sure all statics assume the same props. Also makes sure this doesn't break once we get rid of implicit children in React.FunctionComponent.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 3, 2021

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 54057ef:

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

@codecov
Copy link

codecov bot commented Oct 3, 2021

Codecov Report

Merging #973 (54057ef) into main (cde904c) will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##              main      #973   +/-   ##
=========================================
  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 cde904c...54057ef. Read the comment docs.

Copy link
Member

@MatanBobi MatanBobi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good :)

@eps1lon eps1lon merged commit 7f53b56 into testing-library:main Oct 3, 2021
@eps1lon eps1lon deleted the fix/render/wrapper branch October 3, 2021 13:14
@github-actions
Copy link

github-actions bot commented Oct 3, 2021

🎉 This PR is included in version 12.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@@ -70,7 +70,7 @@ export interface RenderOptions<
*
* @see https://testing-library.com/docs/react-testing-library/api/#wrapper
*/
wrapper?: React.ComponentType<{children: React.ReactElement}>
wrapper?: React.JSXElementConstructor<{children: React.ReactElement}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering whether we should define children as React.ReactNode which seems to be the "official" type for children props. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L829

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrapper never receives anything other than ReactElement. If we would widen children to ReactNode, the implementation of wrapper would have to account for types that it never actually receives.

This is problematic if you want to apply methods to children in the implementation of wrapper that require a single ReactElement such as React.cloneElement.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes perfect sense - ReactNode is indeed very wide. Thanks for the explanation.

@github-actions
Copy link

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

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working released on @alpha released TypeScript Related to TypeScript. Note: only certain maintainers handle TypeScript labeled issues.
Projects
None yet
3 participants