在Vue测试文件中使用嵌套数据属性和挂载方法,可以通过以下步骤实现:
// NestedComponent.vue
<template>
<div>
<p>{{ nestedData }}</p>
<button @click="nestedMethod">Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
nestedData: 'Nested Data',
};
},
methods: {
nestedMethod() {
console.log('Nested Method');
},
},
};
</script>
// NestedComponent.spec.js
import { shallowMount } from '@vue/test-utils';
import NestedComponent from '@/components/NestedComponent.vue';
describe('NestedComponent', () => {
it('renders nested data correctly', () => {
const wrapper = shallowMount(NestedComponent);
expect(wrapper.find('p').text()).toBe('Nested Data');
});
it('calls nested method on button click', () => {
const wrapper = shallowMount(NestedComponent);
const button = wrapper.find('button');
button.trigger('click');
expect(console.log).toHaveBeenCalledWith('Nested Method');
});
});
shallowMount
来创建组件的浅渲染包装器,并使用expect
断言来验证预期结果。领取专属 10元无门槛券
手把手带您无忧上云