Unit testing 如何使用jest在nuxt.js中测试head()

Unit testing 如何使用jest在nuxt.js中测试head(),unit-testing,vue.js,jestjs,nuxt.js,Unit Testing,Vue.js,Jestjs,Nuxt.js,我正在使用Nuxt.js和Jest进行单元测试。我在布局中添加了一个head函数来更改标题,我想对其进行单元测试。 这是我的档案: 你好 导出默认值{ 数据(){ 返回{ 标题:“我的标题” } }, 头(){ 返回{ 标题:这个, 元:[ {hid:'description',name:'description',content:'MY description'} ] } } } 在用于安装组件的vue实例中注入vue meta插件。然后,您可以使用wrapper.vm.$metaInfo

我正在使用Nuxt.js和Jest进行单元测试。我在布局中添加了一个head函数来更改标题,我想对其进行单元测试。 这是我的档案:


你好
导出默认值{
数据(){
返回{
标题:“我的标题”
}
},
头(){
返回{
标题:这个,
元:[
{hid:'description',name:'description',content:'MY description'}
]
}
}
}

在用于安装组件的vue实例中注入
vue meta
插件。然后,您可以使用
wrapper.vm.$metaInfo
访问
head()
数据。见下面的例子

pageOrLayoutToTest.vue


你好
导出默认值{
数据(){
返回{
标题:“我的标题”
}
},
头(){
返回{
标题:这个,
元:[
{hid:'description',name:'description',content:'MY description'}
]
}
}
}
pageOrLayoutToTest.spec.js

从'@vue/test-utils'导入{shallowMount,createLocalVue}
从“vue meta”导入VueMeta
//要测试的页面或布局
将pageOrLayoutToTest从“@/path/to/pageOrLayoutToTest.vue”导入
//使用vue meta创建vue
const localVue=createLocalVue()
使用(VueMeta,{keyName:'head'})
描述('pageOrLayoutToTest.vue',()=>{
让包装纸;
//测试设置
在每个之前(()=>{
包装器=浅装(pageOrLayoutToTest{
localVue
})
})
//测试拆卸
之后(()=>{
if(包装器){
wrapper.destroy()
}
})
它('有正确的内容',()=>{
//要测试的页面或布局注入的头部数据可以通过
//wrapper.vm.$metaInfo。请注意,此对象将不包含数据
//在nuxt.config.js中定义。
//考试题目
expect(wrapper.vm.$metaInfo.title).toBe(‘我的标题’)
//测试元条目
const descriptionMeta=wrapper.vm.$metaInfo.meta.find(
(项目)=>item.hid===“说明”
)
expect(descriptionMeta.content).toBe(“我的描述”)
})
})

这是一个与Nuxt相关的答案,您认为它不起作用,但确实起作用。考虑到Nuxt存储的测试难度,我完全预料到这个测试用例会让人神经紧张。