Home > @lynx-js/react/testing-library > RenderHookOptions > wrapper

RenderHookOptions.wrapper property

Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating reusable custom render functions for common data providers. See setup for examples.

Signature:

wrapper?: ComponentType<{ children: LynxElement }>;

Example

import { renderHook } from '@lynx-js/react/testing-library'
import { ThemeProvider } from 'my-ui-lib'
import { TranslationProvider } from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'

const AllTheProviders = ({children}) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  )
}

const customRenderHook = (ui, options) =>
  renderHook(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@lynx-js/react/testing-library'

// override renderHook method
export { customRender as renderHook }
除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。