I have a tricky situation over here. I have used an npm module:- use-places-autocomplete to get autocomplete suggestions from google maps autocomplete API. Below is the link for the npm module and the CDN link I am using in my react app in public index.html.
Link:- https://www.npmjs.com/package/use-places-autocomplete
CDN:- "https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&libraries=places®ion=us"
The issue is coming when I am testing this link in tests. I am using Jest and React testing library. I am not getting any response (mock response which i have hardcoded in the codebase) when i start typing in the address.
I have tried the following things:-
Mocking the use-places-autocomplete response. But it did not work.
Using MSW for intercepting the CDN. It also didnt work.
In the test suite, adding the script of Google API in beforEach and then rendering the component. It also didnt work.
Can anybody please help me in this. Thanks in advance.
Related
I am building an app using Create React app with TypeScript. I am trying to create some tests (doesn't really matter what test) and Jest fails (see screenshot below)
As I understand Jest doesn't like "import" as it runs in node. How can I get this to work? This is a Create React app straight out of the box so I thought it would be configured to deal with es6 modules. I have tried the options in the screenshot but I can't get anywhere. Any help would be great, TIA
Can someone tells me how to unit test a React application using Swagger to call my own API ? I'm totally lost...
To run my tests I'm using Jest.
Thanks a lot !
I have written application in react js which is fully functional in Chrome browser and willing to adapt the same into IE and other browsers.
I have used whatwg-fetch polyfill for fetch api in IE and below is screenshot it always go to error block of code and says access denied for Anonymous function called.
Any clues regarding above issue will be highly appreciated.
I'm using the google object (e.g. new google.maps.places.PlacesService()) in my React component. This is the component that I would like to test/optimize using Story book. In the story book config, I tried calling the googapis in the 'preview-head.html' as a script pointing to "https://maps.googleapis.com/maps/api/js?key=....
However, when the story book is loading/started, my react component is throwing an exception "ReferenceError: google is not defined". Seems, the above api is not calling properly.
Appreciate your kind help.
Thanks!
For anyone interested, here is the correct answer in the latest version (6.0):
https://storybook.js.org/docs/react/configure/story-rendering
Add the googlescripts tag to your head by including it in preview-head.html
Google's gapi js library wants an onload function specified like this:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
How do I interoperate this with ReactJS?
I tried using react-script-loader (https://github.com/yariv/ReactScriptLoader) which ran into some troubles because gapi doesn't yet exist when the script loader thinks it has completed returning it.
Don't know if you're still looking for this answer but I faced the same problem and the best option that I found was creating this package with all gapi script code, so now I just have to import it into my react app and I doesn't even have to wait the gapi script loaded from google apis link.
gapi-script package
I also created an example showing how you can use this package:
gapi-script example