#Interface: RenderOptions<Q extends Queries = typeof queries>

The options for render.

#Type Parameters

#Properties

#enableBackgroundThread?

optional enableBackgroundThread?: boolean

Render your component in the background thread or not.

Note that all user code in the top level will be executed in the background thread by default. (eg. __BACKGROUND__ is true in the top level)

#Default Value

true

#enableMainThread?

optional enableMainThread?: boolean

Render your component in the main thread or not.

It is recommended to use this option only when you need to test the IFR behavior.

#Default Value

false

#queries?

optional queries?: Q

Queries to bind. Overrides the default set from DOM Testing Library unless merged.

#Example

// Example, a function to traverse table contents
import * as tableQueries from 'my-table-query-library'
import { queries } from '@lynx-js/react/testing-library'

const { getByRowColumn, getByText } = render(<MyTable />, {
  queries: {...queries, ...tableQueries},
})

#wrapper?

optional wrapper?: any

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.

#Example

import { render } 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 customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

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

// override render method
export { customRender as render }