Как издеваться над компонентом, у которого есть ссылка, с помощью шутки?

Question

У меня есть код вроде:

import { GoogleMap } from 'react-google-maps';

const GoogleMapContainer = () => {
    const zoomToBounds = React.useCallback(
        (map): void => map && bounds && map.fitBounds(bounds),
        [bounds]
    );


    <GoogleMap ref={zoomToBounds}>
        ...
    </GoogleMap>
}

, и я пытаюсь высмеять GoogleMap с помощью шутки, когда я тестирую GoogleMapContainer

jest.mock('react-google-maps', () => ({
      GoogleMap: (props) => <div>{props.children}</div>,
}));

Однако я получаю ошибка типа:

    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Я не могу использовать forwardRef, потому что шутка жалуется на использование функций за пределами области действия. Я получаю ту же ошибку, если пытаюсь создать фиктивный компонент на основе классов для GoogleMap.

Как мне обойти ошибку ref?

Answer 1

В ответ на мой собственный вопрос.

Вы можете ссылаться на внешние переменные в своем макете, если вы начинаете их имя с mock. Затем вы можете потребовать содержащий класс после макета, гарантируя, что внешняя переменная (MockGoogleMap) установлена.

class MockGoogleMap extends Component {
  constructor(props) {
    super(props);
  }
  render(): ReactElement {
    return <div>{this.props.children}</div>;
  }
}

jest.mock('react-google-maps', () => ({
  GoogleMap: MockGoogleMap,
}));
const GoogleMapContainer = require('./GoogleMapContainer').default;