How to test vue Js metaInfo - unit-testing

Question

Am writing some unit testing, I have a component with meta info set using Vue-meta
My Component looks like this.
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
}
]
}
}
...

Answer 1

There's an issue on their github repo which says you need to create a local Vue instance.
You can read about local Vue instances in the vue-test-utils docs. It allows you to add components, mixins and install plugins without polluting the global Vue class, i.e. add in the vue-meta properties for this test only.
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')
})
})

Answer 2

You can insert your meta data normally in each component.
If your pages are dynamic and if you want any dynamic SEO or meta tags you can use vue-headful.
Like this
<vue-headful
title="Title from vue-headful"
description="Description from vue-headful"
/>
In vue-headful you can write all the meta tags.