如何测试vue Js metaInfo

Posted 2023-02-22

【中文标题】如何测试vue Js metaInfo

【英文标题】：How to test vue Js metaInfo

【发布时间】：2020-01-14 01:16:17

【问题描述】：

正在编写一些单元测试，我有一个使用 Vue-meta 设置元信息的组件

我的组件看起来像这样。

export default 
...
  metaInfo () 
    const expertName = this.getBlogInfo.blog.author.trim()
    const fullName = expertName ? `$expertName.first_name $expertName.last_name` : 'Cowsoko'
    return 
      title: `Dairynomics - Blog post from $fullName`,
      meta: [
        
          vmid: 'og:description',
          name: 'og:description',
          content: this.description
        ,
        
          vmid: 'og:image',
          name: 'og:image',
          content: this.getBlogInfo.blog.photo
        
      ]
    
  

...

【参考方案1】：

您可以在每个组件中正常插入元数据。 如果您的页面是动态的，并且如果您想要任何动态 SEO 或元标记，您可以使用 vue-headful。 像这样

<vue-headful
        title="Title from vue-headful"
        description="Description from vue-headful"
    />

在 vue-headful 中你可以编写所有的元标记。

【讨论】：

OP 询问如何测试 vue-meta，而不是vue-headful。

【参考方案2】：

有一个问题on their github repo 说您需要创建一个本地 Vue 实例。

您可以阅读有关本地 Vue 实例 in the vue-test-utils docs 的信息。它允许您在不污染全局 Vue 类的情况下添加组件、mixins 和安装插件，即仅在此测试中添加 vue-meta 属性。

import  shallowMount, createLocalVue  from '@vue/test-utils'
import Component from './Component.vue'
import VueMeta from 'vue-meta'

let localVue = createLocalVue();
localVue.use(VueMeta);

describe('Component.vue', function() 
  // Set up the wrapper
  const wrapper = shallowMount(Component)

  it('has a getTitle() method that returns the page title', () => 
    expect(wrapper.vm.getTitle()).toBe(title)
  )

  it('has its meta title correctly set', () => 
    expect(wrapper.vm.$meta().refresh().metaInfo.title).toBe('some title')
  )
)