gpt4 book ai didi

unit-testing - 如何使用 jest 在 nuxt.js 中测试 head()

转载 作者:行者123 更新时间:2023-12-05 01:38:11 24 4
gpt4 key购买 nike

我正在使用 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 实例中注入(inject) 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')
})
})

关于unit-testing - 如何使用 jest 在 nuxt.js 中测试 head(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59964001/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com