Wrapper type breaks types with props other than children

[cfbender]

• @testing-library/react version: 12.1.1
• Testing Framework and version: jest @ 27.2.2
• DOM Environment: 5.14.1

Relevant code or config:

type AppWrapperProps = {
  userProviderProps?: UserProviderProps
}

export const AppWrapper: React.FC<AppWrapperProps> = ({
  children,
  userProviderProps = { user: mockUser },
}) => (
  <UserProvider {...userProviderProps}>
...

What you did:

Upgraded @testing-library/react to 12.1.1

What happened:

Type for wrapper broken in #966

Reproduction:

Use wrapper component that has some props that can be passed

Problem description:

The type being inflexible (only allowing children) means that the wrapper can't take props if used anywhere else

Suggested solution:

Something like wrapper?: React.ComponentType<React.PropsWithChildren>

[eps1lon]

Could you provide a full repro how AppWrapper receives all the props with your custom render method?

[cfbender]

Sure thing!

we are wanting to sometimes use it as such:

type AppWrapperProps = {
  userProviderProps?: UserProviderProps
}

export const AppWrapper: React.FC<AppWrapperProps> = ({
  children,
  userProviderProps = { user: mockUser },
}) => (
  <UserProvider {...userProviderProps}>
    {children}
  </UserProvider>
)

...

    render(<Page {...defaultPageProps.props} />, {
      wrapper: AppWrapper,
    })
    
    // OR
    
    render(
      <AppWrapper userProviderProps={{ ...user }}>
        <Page {...defaultPageProps.props} />
      </AppWrapper>
    )

this gives us the ability to use the same component in multiple ways and overriding some props in the provider

[bfaulk96]

Came here with a very similar issue. The latest release caused new TS type mismatch errors for wrapper.
Temporarily using as RenderOptions['wrapper'] to fix, but obviously this isn't ideal