render(
  <ErrorBoundary>
    <QueryClientProvider client={queryClient}>
      <IntlProvider locale={locale} messages={messages}>
        <BrowserRouter>{/** your app */}</BrowserRouter>
      </IntlProvider>
    </QueryClientProvider>
  </ErrorBoundary>,
)

import { composeProviders } from "compose-providers"
const AppContainer = composeProviders([
  ErrorBoundary,
  // You won't be unfamiliar if you have configured tools like babel/eslint
  [
    QueryClientProvider,
    {
      client: queryClient,
    },
  ],
  [
    IntlProvider,
    {
      locale,
      messages,
    },
  ],
  BrowserRouter,
])
render(<AppContainer>{/** your app */}</AppContainer>)

// RouteComponent.test.tsx
import { render } from "@testing-library/react"
// const wrapper = (props) => (
//   <QueryClientProvider>
//     <BrowserRouter>{props.children}</BrowserRouter>
//   </QueryClientProvider>
// )
const wrapper = composeProviders([QueryClientProvider, BrowserRouter])
render(<RouteComponent />, {
  wrapper,
})
// IntlComponent.test.tsx
import { render } from "@testing-library/react"
// const wrapper = (props) => (
//   <QueryClientProvider>
//     <IntlProvider>{props.children}</IntlProvider>
//   </QueryClientProvider>
// )
const wrapper = composeProviders([QueryClientProvider, IntlProvider])
render(<IntlComponent />, {
  wrapper,
})