useOverrides hook to replace component hooks, elements, whatever for testing and Storybook.

useOverrides.spec.tsx

import { render } from '@testing-library/react';
import { screen } from '@testing-library/dom';
import { useOverrides } from '../useOverrides';
import '@testing-library/jest-dom';

function useFakeTranslation(textId: string) {
  return `${textId.toUpperCase()}-XLATED`;
}

function TestIcon() {
  return <span data-testid="icon">😃</span>;
}

const defaults = {
  TestIcon,
  useFakeTranslation,
};

interface Props {
  textId: string;
  __overrides__?: Partial<typeof defaults>;
}

function TestComponent(props: Props) {
  const { textId } = props;
  const { TestIcon, useFakeTranslation } = useOverrides(props, defaults);
  const text = useFakeTranslation(textId);
  return (
    <div>
      <TestIcon />
      <span data-testid="text">{text}</span>
    </div>
  );
}

describe('use overrides', () => {
  test('should render with defaults', () => {
    render(<TestComponent textId="abc" />);
    expect(screen.getByTestId('icon')).toHaveTextContent('😃');
    expect(screen.getByTestId('text')).toHaveTextContent('ABC-XLATED');
  });

  test('should override test icon', () => {
    const __overrides__ = {
      TestIcon: () => <span data-testid="icon">🙃</span>,
    };
    render(<TestComponent textId="abc" __overrides__={__overrides__} />);
    expect(screen.getByTestId('icon')).toHaveTextContent('🙃');
    expect(screen.getByTestId('text')).toHaveTextContent('ABC-XLATED');
  });

  test('should override translated text hook', () => {
    const __overrides__ = {
      useFakeTranslation: (textId: string) =>
        `${textId.toLowerCase()}-override`,
    };
    render(<TestComponent textId="XYZ" __overrides__={__overrides__} />);
    expect(screen.getByTestId('icon')).toHaveTextContent('😃');
    expect(screen.getByTestId('text')).toHaveTextContent('xyz-override');
  });

  test('should override both', () => {
    const __overrides__ = {
      TestIcon: () => <span data-testid="icon">🙃</span>,
      useFakeTranslation: (textId: string) =>
        `${textId.toLowerCase()}-override`,
    };
    render(<TestComponent textId="lMnOp" __overrides__={__overrides__} />);
    expect(screen.getByTestId('icon')).toHaveTextContent('🙃');
    expect(screen.getByTestId('text')).toHaveTextContent('lmnop-override');
  });
});

useOverrides.ts

export interface PropsWithOverrides<T extends {}> {
  __overrides__?: Partial<T>;
}

export function useOverrides<T extends {}>(
  props: PropsWithOverrides<T>,
  defaults: T
) {
  return props.__overrides__
    ? {
        ...defaults,
        ...props.__overrides__,
      }
    : defaults;
}