Open
Description
🔎 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