Start getting types error after update to v5.7.2

🔎 Search Terms

5.7.2 types issue, LibraryManagedAttributes, componentType issue

🕗 Version & Regression Information

on v5.7.2 the issue exists
with my previous v5.2.2 it was working

⏯ Playground Link

No response

💻 Code

import { ROUTES } from '@/shared/constants'
import { AppStore, RootState, setupStore } from '@/store/store'
import { MsalProvider } from '@azure/msal-react'
import type { RenderOptions } from '@testing-library/react'
import { render } from '@testing-library/react'
import { MsalReactTester } from 'msal-react-tester'
import React, { PropsWithChildren, ReactNode } from 'react'
import { Provider } from 'react-redux'
import { MemoryRouter } from 'react-router-dom'

export const msalTester: MsalReactTester = new MsalReactTester()

// This type interface extends the default options for render from RTL, as well
// as allows the user to specify other things such as initialState, store.
export interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
  preloadedState?: Partial<RootState>
  store?: AppStore
}
type ContextProviderProps = { children: ReactNode }

/**
 * Renders a React component with a Redux store and an optional context provider for testing.
 *
 * This utility function helps in setting up a test environment for React components that depend on Redux store
 * and optional context providers. It wraps the provided UI element with the Redux provider and an optional context provider.
 *
 * @template T - The type of the context provider props.
 * 
 * @param {React.ReactElement} ui - The React element to render.
 * 
 * @param {Object} options - The options for rendering the component.
 * 
 * @param {Object} [options.preloadedState={}] - The initial state for the Redux store.
 * 
 * @param {Store} [options.store=setupStore(preloadedState)] - The Redux store instance. If not provided, a new store is created with the preloaded state.
 * 
 * @param {Object} [options.renderOptions={}] - Additional options to pass to the render function from @testing-library/react.
 * 
 * @param {React.ComponentType<T & ContextProviderProps>} [ContextProvider] - An optional context provider component to wrap around the rendered element.
 * 
 * @param {string[] | Partial<Location>[]} [memoryRouterProps=[{ pathname: '/' }]] - The initial entries for the MemoryRouter.
 * 
 * @param {T} [contextProviderProps] - The props to pass to the context provider component.
 * 
 * @returns {{ store: Store } & RenderResult} The Redux store and the result of the render function from @testing-library/react.

 * @example
 * // Import the function and dependencies
 * import { renderWithProviders } from 'path/to/this/function';
 * import MyComponent from 'path/to/MyComponent';
 * import MyContextProvider from 'path/to/MyContextProvider';
 *
 * // Define initial state and context provider props
 * const preloadedState = { someSlice: { key: 'value' } };
 * const contextProps = { someContextValue: 'value' };
 *
 * // Use the utility to render the component with store and context
 * const { getByText, store } = renderWithProviders(
 *   <MyComponent />,
 *   { preloadedState },
 *   MyContextProvider,
 *   [{ pathname: '/some-path' }],
 *   contextProps
 * );
 */

const renderWithProviders = <T extends Record<string, unknown>, F extends Record<string, unknown>>(
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  }: ExtendedRenderOptions = {},
  ContextProvider?: React.ComponentType<T & ContextProviderProps>,
  memoryRouterProps: string[] | Partial<Location>[] = [{ pathname: ROUTES.HOME }],
  contextProviderProps?: T,
  FormProvider?: React.ComponentType<F & ContextProviderProps>,
  formProviderProps?: F
) => {
  /**
   * A wrapper component that provides Redux store and optional context to the children.
   *
   * @param {PropsWithChildren<{}>} props - The props of the wrapper component.
   * @returns {JSX.Element} The wrapped children with Redux and optional context providers.
   */
  function Wrapper({ children }: PropsWithChildren<Record<string, unknown>>): JSX.Element {
    let wrappedChildren = <>{children}</>

    if (FormProvider) {
      wrappedChildren = <FormProvider {...(formProviderProps as F)}>{wrappedChildren}</FormProvider>
    }

    if (ContextProvider) {
      wrappedChildren = <ContextProvider {...(contextProviderProps as T)}>{wrappedChildren}</ContextProvider>
    }

    return (
      <MsalProvider instance={msalTester.client}>
        <MemoryRouter initialEntries={memoryRouterProps}>
            <Provider store={store}>{wrappedChildren}</Provider>
        </MemoryRouter>
      </MsalProvider>
    )
  }
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }
}

export { renderWithProviders }

🙁 Actual behavior

I have next error on both FormProvider and ContextProvider

🙂 Expected behavior

No error should appear, or there are some new changes which were not mentioned in release notes

Additional information about the issue

No response

Start with the supplied React and TypeScript example, reproducing the FormProvider and ContextProvider errors under TypeScript 5.7.2 and comparing the result with 5.2.2. Reduce the example to the smallest case that still produces the reported error; done means the regression is isolated or explained and covered by an appropriate TypeScript test.