How to mock <Wrapper /> ?

[testrobpoc]

Hey,

I am completely lost on unit testing using Jest.

Basically, does anyone know how to mock in order to render child component in unit tests?

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"}>
    <MyMapComponent />
  </Wrapper>
);

The thing is, always have Status of loading, and it never goes to Success, so the child component is never rendered. Is there a way to mock that Status to Success?

I'm using jest, and react-testing-library.

Thank you.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react with 👍 so we can see what is popular when we triage.

@testrobpoc Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[angelod1as]

+1

[usefulthink]

It's a bit tricky since the google maps API will typically not be available in your tests. For that, but you can use googlemaps/js-jest-mocks to some extent. As for the status, you'd need to mock the @googlemaps/js-api-loader package and configure the Loader.load() method to always return a resolved promise, see here how the loader is used:

react-wrapper/src/index.tsx

Lines 74 to 86 in 5bf3929

	const loader = new Loader(options);
	const setStatusAndExecuteCallback = (status: Status) => {
	if (callback) callback(status, loader);
	setStatus(status);
	};
	setStatusAndExecuteCallback(Status.LOADING);
	loader.load().then(
	() => setStatusAndExecuteCallback(Status.SUCCESS),
	() => setStatusAndExecuteCallback(Status.FAILURE)
	);

[localjo]

For anyone else who is looking for a solution, here is what worked for me:

1. Install @googlemaps/jest-mocks in devDependencies
2. In my test file, add import { initialize } from "@googlemaps/jest-mocks"; to the top.
3. Inside the describe block, add the following:

beforeEach(() => {
  initialize();
});

4. In my Jest setup file, mock the wrapper component:

jest.mock('@googlemaps/react-wrapper', () => {
  function MockWrapper({ children }) {
    return <div>Mock Map {children}</div>;
  }

  return {
    Wrapper: MockWrapper,
  };
});

5. Skip Google Maps API functionality as necessary when the MockWrapper component is used, by checking Wrapper.name === 'MockWrapper'. For example:

class MapDOM extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    if (Wrapper.name === 'MockWrapper') return; // Skip if this is a test
    ...
    this.map = new window.google.maps.Map(...);
    ...
  }
  
  render() {
    return <div id='map-dom'>
      ...
    </div>;
  }
}

export const Map = () => {
  return (
    <View>
      <Wrapper apiKey=''>
        <MapDOM />
      </Wrapper>
    </View>
  );
};

Hopefully that helps someone.

[angelod1as]

@localjo 's answer should be in docs.