如何测试与Cypress外部依赖的组件

Question

我正在尝试在Cypress的新组件测试功能的帮助下测试谷歌地图组件。

我面临的问题是，我正在努力将谷歌地图附加到页面。

目前，组件有一个启动器方法挂载谷歌地图的标题，这工作伟大时加载一个页面正常，但它不工作在赛普拉斯测试。

是否有一个例子可以实现相似?

示例测试文件，我所做的是:

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

加载谷歌地图，我使用:

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

Answer 1

看起来您遵循了这些文档加载地图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);

要在Cypress组件测试中复制，请使用Cypress应用程序窗口/文档做类似的事情
(没有尝试过)

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                
})