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

tzdcorbm 于 2023-04-07 发布在 Vue.js

关注(0)|答案(2)|浏览(177)

我正在使用Nuxt.js和Jest进行单元测试。我在布局中添加了一个head函数来更改标题，我想对它进行单元测试。下面是我的文件：

<template>
  <h1 class="title">HELLO</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'MY TITLE'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'MY DESCRIPTION' }
      ]
    }
  }
}
</script>

我试过：

const wrapper = shallowMount(index)
wrapper.vm.head() <- fails

有什么建议吗？

vue.js

来源：https://stackoverflow.com/questions/59964001/how-to-test-head-in-nuxt-js-using-jest

2条答案

按热度按时间

xqnpmsa81#

在挂载组件的Vue示例中注入vue-meta插件。然后您可以使用wrapper.vm.$metaInfo访问head()数据。请参见下面的示例。

pageOrLayoutToTest.vue

<template>
  <h1 class="title">HELLO</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'MY TITLE'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'MY DESCRIPTION' }
      ]
    }
  }
}
</script>

pageOrLayoutToTest.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueMeta from 'vue-meta'

// page or layout to test
import pageOrLayoutToTest from '@/path/to/pageOrLayoutToTest.vue'

// create vue with vue-meta
const localVue = createLocalVue()
localVue.use(VueMeta, { keyName: 'head' })

describe('pageOrLayoutToTest.vue', () => {
  let wrapper;

  // test set up
  beforeEach(() => {
    wrapper = shallowMount(pageOrLayoutToTest, {
      localVue
    })
  })

  // test tear down
  afterEach(() => {
    if (wrapper) {
      wrapper.destroy()
    }
  })

  it('has correct <head> content', () => {
    // head data injected by the page or layout to test is accessible with
    // wrapper.vm.$metaInfo. Note that this object will not contain data
    // defined in nuxt.config.js.

    // test title
    expect(wrapper.vm.$metaInfo.title).toBe('MY TITLE')

    // test meta entry
    const descriptionMeta = wrapper.vm.$metaInfo.meta.find(
      (item) => item.hid === 'description'
    )
    expect(descriptionMeta.content).toBe('MY DESCRIPTION')
  })
})

赞(0）回复(0）举报 2023-04-07

gojuced72#

head（）可以通过以下方式访问：