Question

我是Jest的新手，正在努力测试使用Firestore构建的Firestore / Vue网络应用程序并使用Jest进行测试

我不想测试functions，因为我没有任何内容，该Web应用程序是一个简单的“博客”页面，不需要登录或进行任何操作

以下代码适用于我的组件

<template>
    <div>
        <div v-if="!noActiveBlogs" class="form-group">
            <div class="col-12">
                <input ref="searchInput" type="text" class="form-control" v-model="search"
                        placeholder="Search active blogs...">
            </div>
        </div>
        <div v-for="blog in filteredBlogs" :key="blog.id" class="form-group">
            <div v-if="blog.active" class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row d-flex align-items-center">
                            <div name="blogTitle" class="col-12 col-lg-8 text-truncate">
                                {{ blog.title | capitalize }}
                            </div>
                            <div class="d-none d-lg-block col-lg-4 text-right" style="font-size: 1rem">
                                Published date:&nbsp;
                                <span name="blogCreatedDate" class="text-info font-italic">
                                    {{ blog.createdDate | fullMthDate }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        {{ blog.body | capitalize }}
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col d-flex align-items-center">
                                <b style="margin-right: .25rem">Published by:</b>
                                <span name="blogAuthor" class="text-info font-italic">
                                    {{ blog.author | capitalize }}
                                </span>
                            </div>
                            <div class="col d-flex justify-content-end">
                                <button name="blogCloseButton" class="btn btn-danger col-2 ml-2"
                                            @click="closeBlog(blog)">
                                    Close blog
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="noActiveBlogs" class="form-group">
            <div class="col-12">
                <div class="card">
                     <div class="card-body text-center">
                        <h3 class="mb-0 text-muted">There are no active blogs to view</h3>
                     </div>
                </div>
            </div>      
        </div>
     </div>
</template>

<script>
import searchMixin from '../mixins/searchMixin';
import loader from './loader.vue';
import { blogsCollection } from '../../firebase';
import moment from 'moment'

export default {
    components: {
        loader: loader
    },

    mixins: [ searchMixin ],

     data () {
        return {
            blogs: [],
            loading: true,
            noActiveBlogs: false,
            search: ''
        }
    },

    firestore() {
        return {
            blogs: blogsCollection.orderBy('createdDate', 'desc')
        }
    },

    created() {
        this.checkBlogs();

        if (this.blogs.length > 0) {
            setTimeout(() => this.$nextTick(() => this.$refs.searchInput.focus()), 2750);
        }
    },

    methods: {
        closeBlog(blog) {
            this.loading = true;

            blogsCollection.doc(blog.id).update({
                ...blog,
                active: false,
                closedDate: moment(String(new Date())).format('DD MMMM YYYY HH:mm:ss')
            })
            .then(() => {
                this.$blogDeleted = true;
                this.checkBlogs();
                this.loading = false;

                setTimeout(() => this.$blogDeleted = false, 2000);
            })
            .catch(function(error) {
                console.error("Error updating document: ", error);
            });
        },

        checkBlogs() {
            blogsCollection.where('active', '==', true).get()
            .then(snapshot => {
                if (snapshot.empty) {
                    this.noActiveBlogs = true;

                    return;
                } else {
                    this.noActiveBlogs = false;
                }
            })
        }
    }
}
</script>

我想/需要模拟

的测试

blogsCollection.where('active', '==', true).get()

下面也是我的firebase.config代码

import { initializeApp } from 'firebase';

const firebaseConfig = initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "v",
    messagingSenderId: "",
    appId: ""
});

export const db = firebaseConfig.firestore();
export const blogsCollection = db.collection('blogs');

当我在网上浏览时，我所能找到的就是测试云功能，而我只是在获取/获取数据而没有这样做

这是我到目前为止尝试过的，但是没有运气

import { mount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import TestHelpers from './_testHelpers'
import ShowBlogs from '@/components/showBlogs.vue'

const localVue = createLocalVue()
const router = new VueRouter()
localVue.use(VueRouter)

jest.mock('../../firebase', () => {
    blogsCollection: jest.fn(() => {
        return new Promise(resolve => {
            process.nextTick(() => {
                resolve({
                    data: [
                        { id: 1, title: 'One', body: 'One', createdDate: '01 January 1991', author: 'Test One'},
                        { id: 2, title: 'Two', body: 'Two', createdDate: '02 January 1992', author: 'Test Two'}
                    ]
                })
            })
        })
    })
})

// jest.mock('../../firebase', () => {
//     blogsCollection: jest.fn(() => {
//         [
//             { id: 1, title: 'One', body: 'One', createdDate: '01 January 1991', author: 'Test One'},
//             { id: 2, title: 'Two', body: 'Two', createdDate: '02 January 1992', author: 'Test Two'}
//         ]
//     })
// })

describe('ShowBlogs.vue tests', () => {
    let wrapper
    let testHelper

    beforeEach(() => {
        wrapper = mount(ShowBlogs, {
            localVue,
            router
        })
        testHelper = new TestHelpers(wrapper, expect)
    })

    afterEach(() => {
        wrapper.destroy()
    })

    it('Checks POSTS', async () => {
            console.log('Test')
    })
})

使用Jest测试Vue应用程序的Firebase / Firestore

0 个答案: