Как проверить содержимое веб-компонента выпадающего списка с VueJS, машинопись и шутка

Question

Я пытаюсь проверить содержимое раскрывающегося списка, реализованного в виде веб-компонента, используемого в приложении VueJS.

В частности, я хочу проверить, содержит ли данный раскрывающийся список элементы, которые извлекаются с помощью HTTP-запроса (реализованного в хранилище vuex), когда запускается ловушка жизненного цикла приложения created().

Приложение VueJS написано на машинописном тексте, и я использую Jest в качестве среды тестирования.

Мой Vue компонент SearchBar.vue, который я хотел бы проверить:

<template>
    <dropdown-web-component
        label="Applications"
        :options.prop="applications"
    />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SearchBar extends Vue {
    get applications() {
        return this.$typedStore.state.applications;
    }
    created() {
        // the http call is implemented in the vuex store
        this.$store.dispatch(Actions.GetApplications);
    }
}

Answer 1

Вот как я это сделал:

Тест SearchBar.spec.ts для компонента:

import Vuex, { Store } from "vuex";
import { shallowMount, Wrapper } from "@vue/test-utils";
import SearchBar from "@/components/SearchBar.vue";
import { Vue } from "vue/types/vue";

describe('SearchBar', () => {
    let actions: any;
    let store: Store;
    let state: any;

    beforeEach(() => {
        const applications = ['applicationId1', 'applicationId2', 'applicationId3'];

        actions = {
            GET_APPLICATIONS: jest.fn()
        };
        state = {
            applications
        };
        store = new Vuex.Store({
            modules: {
                users: {
                    actions,
                    state
                }
            }
        });
    });

    it('should dispatch the GET_APPLICATIONS vuex store action when created', () => {
        shallowMount(SearchAndFilterBar, { store });

        expect(actions.GET_APPLICATIONS).toHaveBeenCalled();
    });

    describe('Applications dropdown', () => {
        it('should render a dropdown with applications', () => {
            const wrapper = shallowMount(SearchAndFilterBar, {
                store
            });
            const filter: Wrapper<Vue> = wrapper.find('dropdown-web-component');
            // without the cast to any, TS will not be able to find vnode
            expect((filter as any).vnode.data.domProps.options.length).toEqual(3);
        });
    });
});

Я надеюсь, что мой собственный ответ поможет кому-то так же, как и у меня некоторое время, чтобы понять все это.