How to use the @testing-library/react.render function in @testing-library/react

export default component => {
  /*
   * Similar to this problem https://github.com/testing-library/react-testing-library/issues/402
   * This helper was created to solve the problem of rendering helmet/head contents in snapshots.
   * Pass in a component that uses helmet somewhere in the component tree.
   * The full html tree is returned which you can then use to snapshot helmet/head contents.
   */

  const { container } = render(component);
  const noop = () => {};
  const ARBITRARY_TIMEOUT = 100; // seems long enough for any dom mutations to occur
  const headElement = document.querySelector('head');

  headElement.innerHTML = ''; // clear out head mutations from previous tests

  return waitForDomChange({
    container: headElement,
    timeout: ARBITRARY_TIMEOUT,
  })
    .catch(noop) // handle a waitForDomChange timeout
    .then(mutationsList => {
      const headMutationDetected = mutationsList && mutationsList.length;

      if (headMutationDetected) {
        // helmet was probably used so we should get the full html

it('Should show the starting state', () => {
    const { getByTestId } = render(testComponentPublishing);
    expect(getByTestId('integration-status-detail')).toHaveTextContent(
      'Starting...'
    );
  });

function loadTestPlugins() {
  loadPlugins();
  return render();
}

function renderDownshift({props} = {}) {
  const utils = render()
  return {
    ...utils,
    input: utils.queryByTestId('input'),
    label: utils.queryByTestId('label'),
  }
}

const customRender = (ui: React.ReactElement, options?: RenderOptions): Result => ({
  ...render(ui, {
    wrapper: Wrapper,
    ...options
  }),
  sheets
})

function loadTestPlugins() {
  loadPlugins();
  return render();
}

const customRender = (
  node: React.ReactNode,
  { locale = 'en', ...rtlOptions }: Partial = {}
) => ({
  ...render({node}, rtlOptions),
});

it('should dispatch notification when component renders, then remove the notification when component is removed', async () => {
    rendered = render(
      
        
      
    );
    await waitForElement(() => rendered.getByText('Open'));
    fireEvent.click(rendered.getByText('Open'));

    await wait(() => {
      expect(showNotification).toHaveBeenCalledWith(
        expect.objectContaining({
          domain: NOTIFICATION_DOMAINS.SIDE,
          kind: NOTIFICATION_KINDS_SIDE.success,

it('should check is it wrapped with <div>', () =&gt; {
    const component = render(
      ,
    );

    const { container } = component;

    expect(container.firstChild.tagName).toBe('DIV');
  });
</div>

it('matches snapshot', () => {
    const historyDialog = (
      
    );
    render(historyDialog);
    expect(document.body.lastChild).toMatchSnapshot();
  });
});