如何测试vue Js metaInfo答案

【问题标题】：How to test vue Js metaInfo如何测试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
        }
      ]
    }
  }

...

【问题讨论】：

标签： unit-testing vue.js testing jestjs vue-component

【解决方案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')
  })
})

【讨论】：