React Component Test Template

Component.test.tsx

import { ComponentProps, ReactNode } from 'react';

import { Store } from 'common/store/test-utils/factories';
import expectRenderError from 'test-utils/expectRenderError';
import { fireEvent, renderWithHoc } from 'test-utils/helpers';

import XXX from '..';

type RenderComponentProps = {
  props: Partial<ComponentProps<typeof XXX>>;
  jsxToRender?: (props: ComponentProps<typeof XXX>) => ReactNode;
};

describe('XXX', () => {
  const renderComponent = (args: Partial<RenderComponentProps> = {}) => {
    const { jsxToRender = (actualProps) => <XXX {...actualProps} />, props = {} } = args;
    const store = Store.build();

    const actualProps: ComponentProps<typeof XXX> = {
      // TODO: complete this:
      // onSubmit: jest.fn().mockResolvedValue(null),
      // onChange: jest.fn(),
      ...props,
    };

    return {
      ...actualProps,
      ...renderWithHoc(jsxToRender(actualProps), {
        store,
        /** Uncomment if form: useFormStore: true, */
      }),
    };
  };

  it('renders without crashing', () => {
    const { container } = renderComponent();
    expect(container).toMatchSnapshot();
  });
});

Component.tsx

import React from 'react';

type Props = {};

const XXX = (_props: Props) => {
  return <div>TODO</div>;
};

export default XXX;