Тестирование компонента VueJS, содержащего другие компоненты, написанные мной - PullRequest
Новая
       26

Тестирование компонента VueJS, содержащего другие компоненты, написанные мной

0 голосов
/ 02 ноября 2018

Я работаю на веб-сайте с несколькими компонентами, которые содержат другие компоненты. Теперь я хотел бы проверить, правильно ли деактивирована кнопка сохранения формы, если данные не установлены. Я использую vuetify для пользовательского интерфейса и 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 warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

Итак, мой вопрос: как я могу протестировать компонент, содержащий другие написанные мной компоненты?

Заранее благодарю за помощь.

1 Ответ

0 голосов
/ 02 ноября 2018

вместо mount, используйте shallowMount.

Как и mount, он создает оболочку, которая содержит визуализируемый компонент Vue, но с заглушенными дочерними компонентами.

https://vue -test-utils.vuejs.org / апи / # shallowmount

...