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

To help you get started, we’ve selected a few @testing-library/react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bbc / psammead / packages / utilities / psammead-test-helpers / src / renderWithHelmet.js View on Github external
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
github syndesisio / syndesis / app / ui-react / packages / ui / __tests__ / Integration / IntegrationStatusDetail.spec.tsx View on Github external
it('Should show the starting state', () => {
    const { getByTestId } = render(testComponentPublishing);
    expect(getByTestId('integration-status-detail')).toHaveTextContent(
      'Starting...'
    );
  });
github downshift-js / downshift / src / __tests__ / downshift.get-label-props.js View on Github external
function renderDownshift({props} = {}) {
  const utils = render()
  return {
    ...utils,
    input: utils.queryByTestId('input'),
    label: utils.queryByTestId('label'),
  }
}
github fluent-org / fluent-ui / packages / fluent-ui / src / test-utils / createRender.tsx View on Github external
const customRender = (ui: React.ReactElement, options?: RenderOptions): Result => ({
  ...render(ui, {
    wrapper: Wrapper,
    ...options
  }),
  sheets
})
github commercetools / merchant-center-application-kit / packages / application-components / test-utils / test-utils.tsx View on Github external
const customRender = (
  node: React.ReactNode,
  { locale = 'en', ...rtlOptions }: Partial = {}
) => ({
  ...render({node}, rtlOptions),
});
github commercetools / merchant-center-application-kit / packages / react-notifications / src / components / notifier / notifier.spec.tsx View on Github external
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,
github SurenAt93 / monaco-react / src / Loading / index.spec.js View on Github external
it('should check is it wrapped with <div>', () =&gt; {
    const component = render(
      ,
    );

    const { container } = component;

    expect(container.firstChild.tagName).toBe('DIV');
  });
</div>
github apache / druid / web-console / src / dialogs / history-dialog / history-dialog.spec.tsx View on Github external
it('matches snapshot', () =&gt; {
    const historyDialog = (
      
    );
    render(historyDialog);
    expect(document.body.lastChild).toMatchSnapshot();
  });
});