如何在 vue test utils 中模拟 navigator.clipboard.writeText
how to mock navigator.clipboard.writeText in vue test utils
我正在尝试在 nuxt 中测试复制到剪贴板,但测试用例无法涵盖 navigator.clipboard.writeText
,如何测试导航器的东西,我也尝试过 shallowMount
和 mount 但都不起作用,
<template>
<span v-b-tooltip.hover class="url" title="Copy" data-test="copyUrl" @click="handleCopy(listing.url)">
<i class="fa fa-copy" aria-hidden="true"/>
</span>
</template>
<script>
export default {
............
methods: {
..............
handleCopy(url) {
navigator.clipboard.writeText(url);
}
...............
}
........
};
</script>
// test case
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
// componenet
import Table from '@/components/Listings/Layouts/Table.vue';
const wrapper = shallowMount(Table, {
attachToDocument: true,
});
describe('Table.vue', () => {
it('check handleCopy', () => {
wrapper.find('[data-test="copyUrl"]').trigger('click');
});
});
window.__defineGetter__('navigator', function() {
return {
clipboard: {
writeText: jest.fn(x => x)
}
}
})
试试这个
此方法允许您测试 readText
和 writeText
,并允许您的测试检查写入剪贴板的内容。这也适用于 TypeScript,而 window.__defineGetter__
会抛出错误。
let clipboardContents = "";
Object.assign(navigator, {
clipboard: {
writeText: text => { clipboardContents = text; },
readText: () => clipboardContents,
},
});
如果您使用的是 jest,请使用正确的方法:
let clipboardContents = "";
Object.assign(navigator, {
clipboard: {
writeText: jest.fn(text => { clipboardContents = text; }),
readText: jest.fn(() => clipboardContents),
},
});
我正在尝试在 nuxt 中测试复制到剪贴板,但测试用例无法涵盖 navigator.clipboard.writeText
,如何测试导航器的东西,我也尝试过 shallowMount
和 mount 但都不起作用,
<template>
<span v-b-tooltip.hover class="url" title="Copy" data-test="copyUrl" @click="handleCopy(listing.url)">
<i class="fa fa-copy" aria-hidden="true"/>
</span>
</template>
<script>
export default {
............
methods: {
..............
handleCopy(url) {
navigator.clipboard.writeText(url);
}
...............
}
........
};
</script>
// test case
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
// componenet
import Table from '@/components/Listings/Layouts/Table.vue';
const wrapper = shallowMount(Table, {
attachToDocument: true,
});
describe('Table.vue', () => {
it('check handleCopy', () => {
wrapper.find('[data-test="copyUrl"]').trigger('click');
});
});
window.__defineGetter__('navigator', function() {
return {
clipboard: {
writeText: jest.fn(x => x)
}
}
})
试试这个
此方法允许您测试 readText
和 writeText
,并允许您的测试检查写入剪贴板的内容。这也适用于 TypeScript,而 window.__defineGetter__
会抛出错误。
let clipboardContents = "";
Object.assign(navigator, {
clipboard: {
writeText: text => { clipboardContents = text; },
readText: () => clipboardContents,
},
});
如果您使用的是 jest,请使用正确的方法:
let clipboardContents = "";
Object.assign(navigator, {
clipboard: {
writeText: jest.fn(text => { clipboardContents = text; }),
readText: jest.fn(() => clipboardContents),
},
});