如何使用 Cypress 测试外部依赖的组件
How to test components that external dependencies with Cypress
我正在尝试借助 Cypress 的新组件测试功能来测试 google 地图组件。
我面临的问题是我很难将 google 地图附加到页面。
目前,组件有一个启动器方法,可以将 google 映射挂载到 header,这在正常加载页面时效果很好,但在 Cypress 测试中不起作用。
有没有可以实现相似程度的例子?
示例测试文件,我所做的只是:
it('...', () => {
mount(myComponent)
});
要加载 google 个地图,我使用:
let script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
看起来你遵循了这些文档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);
要在 Cypress 组件测试中进行复制,请对 Cypress 应用执行类似操作 window/document
(没试过)
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
})
我正在尝试借助 Cypress 的新组件测试功能来测试 google 地图组件。
我面临的问题是我很难将 google 地图附加到页面。
目前,组件有一个启动器方法,可以将 google 映射挂载到 header,这在正常加载页面时效果很好,但在 Cypress 测试中不起作用。
有没有可以实现相似程度的例子?
示例测试文件,我所做的只是:
it('...', () => {
mount(myComponent)
});
要加载 google 个地图,我使用:
let script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
看起来你遵循了这些文档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);
要在 Cypress 组件测试中进行复制,请对 Cypress 应用执行类似操作 window/document
(没试过)
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
})