Vue和Jest单元测试组件

Question

我对Vue js很陌生，我开始使用Jest进行单元测试。我不知道从哪里开始，如何开始。我有一段Vue代码，我想用Jest测试它。任何建议或想法我都会非常感谢。我读到我应该使用Vue测试实用程序中的shallMount，以避免在组件测试期间出现问题

<template >
<div class="wrapper">
<div class="user">
<span>{{ user.substr(0, 4) }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
user: {
type: String,
required: true
}
}
}
</script>

目前我有这样的东西，但我不知道如何使用

import { shallowMount } from '@vue/test-utils'
import User from '../User.vue'

describe('User', () => {
it('Should substract four letters', () => {
const wrapper = shallowMount(User, {
props: {
''
}
})
})
})

Answer 1

您可以阅读vue-test-utils的官方文档，它非常清晰且有用。要了解如何模拟函数、存根和其他测试内容，请参阅Jest文档。

对于您的示例，使用propsData而不是props(请查看上面的文档(，您应该在每个测试用例结束时使用一些断言(检查期望值(：

describe('User', () => {
it('Should substract four letters', () => {
const wrapper = shallowMount(User, {
propsData: {
user: 'User00000000'
}
})
// check that span element has correct substring
expect(wrapper.find(".user span").text()).toBe('User');
})
})