CODEWITHSUNDEEP
unit-testingvue.jstestingjestjsvue-component
Frank HN
Frank HN

Reputation: 535

How to test vue Js metaInfo

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
        }
      ]
    }
  }

...

Upvotes: 2

Views: 1186

Answers (2)

Sai Kiran Reddy Uppula
Sai Kiran Reddy Uppula

Reputation: 33

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.

Upvotes: 1

marcellothearcane
marcellothearcane

Reputation: 174

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')
  })
})

Upvotes: 1

Related Questions