使用Vue，打字稿和玩笑测试Web组件

Question

我正在尝试测试VueJS应用程序中使用的Web组件。具体来说，我想测试给定的下拉列表（作为Web组件实现）是否包含在创建应用程序时由HTTP查询检索的项目。

Answer 1

这是我的工作方式：

我要测试的我的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);
    }
}

组件的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
                }
            }
        });
    });

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

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

        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);
        });
    });
});

我希望我自己的回答可以帮助某人，并且花了我很多时间才能弄清所有这些。