Skip to content

Latest commit

 

History

History
20 lines (15 loc) · 946 Bytes

Creating a Helper for Rendering Components and User Events.md

File metadata and controls

20 lines (15 loc) · 946 Bytes

Where you put this file is up to you, but we can bundle together the act of rendering a component and setting up user-event. For example, we could do something like this:

import type { ReactElement } from 'react';
import { render as renderComponent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

type RenderOptions = Parameters<typeof renderComponent>[1];

export * from '@testing-library/react';

export const render = (ui: ReactElement, options?: RenderOptions) => {
  return {
    ...renderComponent(ui, options),
    user: userEvent.setup(),
  };
};

As of this writing the type for the options, which is the optional second argument to render is Omit<RenderOptions, 'queries'>. I don't care to think about this ever again. So, I chose to use Parameters<typeof renderComponent>[1] to define a type that can best be summarized as, "Whatever the second argument to render is."