0

我正在尝试借助赛普拉斯的新组件测试功能来测试谷歌地图组件。

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

目前，组件有一个将谷歌地图挂载到标题的启动器方法，这在正常加载页面时效果很好，但在赛普拉斯测试中不起作用。

有没有可以实现相似程度的示例？

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

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

要加载我使用的谷歌地图：

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

document.head.appendChild(script);
4

1 回答 1

2

您似乎关注了这些文档 正在加载 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);

要在赛普拉斯组件测试中复制，对赛普拉斯应用程序窗口/文档做类似的事情
（没有尝试过这个）

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                
})
于 2021-10-15T10:01:13.073 回答