测试包含我自己编写的其他组件的 VueJS 组件

Posted 2023-02-22

【中文标题】测试包含我自己编写的其他组件的 VueJS 组件

【英文标题】：Testing VueJS component containing other components written by myself

【发布时间】：2019-04-06 05:01:47

【问题描述】：

我在一个包含多个组件的网站上工作，其中包含其他组件。现在我想测试如果没有设置数据，表单的保存按钮是否正确停用。我使用 vuetify 作为 UI 和 Jest 进行测试。

这是我的父组件，包含 edit-user-details 组件：

    <template>
    <v-container>
        <v-form v-model="valid">
            <v-card>
                <v-card-text>
                    <edit-user-details :user="user"></edit-user-details>
                </v-card-text>
                <v-card-actions>
                    <v-btn :disabled="!valid" @click="save()">Save</v-btn>
                    <v-btn @click="cancel()">Cancel</v-btn>
                </v-card-actions>
            </v-card>
        </v-form>
    </v-container>
</template>

<script>
    export default 
        name: "edit-user",
        components: ,
        data: () => (
            user: ,
            valid: false
        ),
        methods: 
            save() 
                ...
            ,
            cancel() 
                ...
            
        
    
</script>

这是edit-user-details组件的一部分：

<template>
    <v-container>
        <v-text-field
                v-model="user.userName"
                label="Username*"
                required
                :rules="[v => !!v || 'Please, enter a user name.']"
        ></v-text-field>
       ...
    </v-container>
</template>

<script>
    export default 
        name: "edit-user-details",
        props: 
            user: 
                type: Object,
                default: () => ()
            
        
    
</script>

这里有我的测试：

import  mount, createLocalVue  from '@vue/test-utils'
import EditUser from '../../src/views/EditUser'
import Vuetify from 'vuetify';
import EditUserDetails from '../../src/components/EditUserDetails'


describe('Edited user data ', () => 

  it('can be saved if valid', () => 
      const localVue = createLocalVue();
      localVue.use(Vuetify)
      localVue.use(EditUserDetails)

      const wrapper = mount(EditUser, 
          localVue: localVue
      );

  )
)

测试是绿色的，因为它没有断言。主要问题是，我收到此错误：[Vue 警告]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

所以我的问题是：如何测试包含我编写的其他组件的组件？

提前感谢您的帮助。

【参考方案1】：

用shallowMount代替mount。

与 mount 一样，它创建一个 Wrapper，其中包含已安装的和 渲染 Vue 组件，但带有存根的子组件。

https://vue-test-utils.vuejs.org/api/#shallowmount

【讨论】：

我想这在这种情况下没有帮助，因为子组件包含每个输入字段的验证逻辑。父级使用此逻辑来激活和停用按钮。对孩子进行存根将删除验证逻辑。

你不能模拟Vuetify 依赖吗？ vue-test-utils.vuejs.org/api/options.html#mocks

我不需要。 Vuetify 工作正常。只是不知道怎么注册自己的组件。

基本的测试经验法则是将您的测试组件与其依赖项分离，包括子组件。所以我们应该寻找一种方法来模拟它们，而不是将它们提供给被测试的父级。你能分享你将数据从edit-user-details 传递到edit-user 的方式吗？ （事件等）

这是一个简单的绑定：:user="user"