How to mock <Wrapper /> ? #656

Activity

1. testrobpoc

   added

   triage meI really want to be triaged.I really want to be triaged.

   type: questionRequest for information or clarification. Not an issue.Request for information or clarification. Not an issue.

   on Apr 21, 2023
2. wangela commented on Apr 21, 2023

   

   wangela

   on Apr 21, 2023

   Member

   More actions

   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.

   👍React with 👍7Reacted by bruno-agileengine, Angelo Dias, Masato Sogame, Ian Butler, SW-AnhNTT, Jo Sprague and Felipe Lückemeyer
3. blunderbuss-gcf

   assigned

   wangela

   on Apr 21, 2023
4. angelod1as commented on May 12, 2023

   

   angelod1as

   on May 12, 2023

   More actions

   +1
5. usefulthink commented on Oct 12, 2023

   

   usefulthink

   on Oct 12, 2023

   Contributor

   More actions

   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)
   	);
6. usefulthink

   removed

   triage meI really want to be triaged.I really want to be triaged.

   on Oct 12, 2023
7. localjo commented on Feb 6, 2024

   

   localjo

   on Feb 6, 2024

   Last edited by localjo

   More actions

   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.

   👍React with 👍1Reacted by Josh
8. angelod1as commented on Feb 6, 2024

   

   angelod1as

   on Feb 6, 2024

   More actions

   @localjo 's answer should be in docs.