JEST 服务模拟无法正常工作

Question

我们正在添加一个测试用例，以在调用 test() 时检查 testPromiseFlag 和 testCallbackFlag 是否为真。

//test.vue
testPromiseFlag = false;
testCallbackFlag = false;

        promiseTester() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve();
                }, 2000)
            })
        }

        callbackTester(cb) {
            return cb();
        }

        test(): void {
            this.promiseTester().then(() => {
                this.testPromiseFlag = true;
            });
            this.callbackTester(() => {
                this.testCallbackFlag = true;
            })
        }

测试文件包含如下：

//test.jest.ts
import { shallowMount, createLocalVue, config } from '@vue/test-utils'
import Vuex from 'vuex'
import test from './test.vue';
let localVue = createLocalVue();
localVue.use(Vuex);

describe('test', () => {
    let wrapper: any;
    let instance: any;

    beforeEach(() => {
        wrapper = shallowMount(test, {});
        instance = wrapper.vm;
    });

    test('should testPromiseFlag and testCallbackFlag be true', async () => {
        await instance.test();
        await wrapper.vm.$nextTick();
        expect(instance.$data.testPromiseFlag).toBeTruthy();
        expect(instance.$data.testCallbackFlag).toBeTruthy();
        wrapper.destroy();
    });
});

在运行测试用例之后，我们收到“expect(received).toBeTruthy() Received: false”。此问题有任何解决方案吗？

Answer 1

test() 应该 return 一个 Promise。否则 await 立即解决。

解决此问题的一种方法是使 test() 成为 async 函数（实际上 return 是 Promise），await 是 promiseTester():

async test() {
  await this.promiseTester();
  this.testPromiseFlag = true;
  this.callbackTester(/*...*/); 
}

JEST 服务模拟无法正常工作

JEST services mocking not working properly

vue.js

jestjs

vue-test-utils