How to test components that external dependencies with Cypress

Question

I am trying to test a google maps components with help of Cypress's new component testing functionality.

The issue that I am faced with is that I am struggling to attach google maps to the page.

Currently, component has an initiator method which mounts google maps to the header, which works great when loading a page as normal, but it doesn't work within Cypress test.

Is there an example of how similar can be achieve?

Example test file, all I did was:

it('...', () => {
   mount(myComponent)
});

To load google maps I use:

let script = document.createElement("script");
script.src = url;

document.head.appendChild(script);

You have a way you are adding google maps to Vue app (vue.use or something)? Should use similar approach in component test either before mount, in wrapper, or as mount option (depends on usage). — Michael Hines, Oct 14 '21 at 21:13
Show component in Vue app, and main.js if `vue.use(...)`, and demo page of 3rd party lib (if applicable). — Michael Hines, Oct 14 '21 at 21:16
I load google maps by appending to the
. I've added an example to the comment. — Vlad Vladimir Hercules, Oct 14 '21 at 22:41
Post the component + main.js, can't help you with 5 lines code only! — Michael Hines, Oct 15 '21 at 05:52

score 2 · Accepted Answer · answered Oct 15 '21 at 10:01

Looks like you followed these docs Loading the Maps JavaScript API

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

To replicate in Cypress component test, do similar thing with Cypress app window/document
(have not tried this)

const win = cy.state('window')
const document = win.document

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;
document.head.appendChild(script);

// use attachTo option to put your component in correct context 
// i.e where google maps is global
const wrapper = mount(MyComponent, {
  attachTo: win                
})

I am facing the same trouble,but I have cypress project separated from the one to test; is there a way to achieve the same result? I am getting mad on it — Don Diego, Dec 11 '21 at 08:27

How to test components that external dependencies with Cypress

1 Answers1