Start getting types error after update to v5.7.2

[sashberd]

🔎 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

[nozomu-koshirae]

This seems relevant to #60573

[skaionedev]

I had the same weird issue after upgrading typescript version.
Eventually I had to downgrade it to solve the issue.