Vuejs test a function that returns a Promise on "Created" hook

Question

I have a Vuejs app with the following script (in Typescript):

import { Foo, FooRepository } from "./foo";
import Vue from 'vue';
import Component from 'vue-class-component';
import { Promise } from "bluebird";

@Component
export default class MyComponent extends Vue {
    isLoading: boolean;
    fooData: Foo;

    data() {
        return {
            isLoading: true,
            fooData: new Foo()
        }
    }

    created() {
        this.populate();
    }

    populate() {
        console.log("populate");
        new FooRepository().get().then((data: Foo) => {
            console.log(data);
            this.isLoading = false;
            this.fooData = data;
        });
    }

So the populate method is called on the created hook, the repository.get() returns a Promise, the implementation is performing a fetch

To test this, I am trying to use:

import * as fetch from "fetch-mock"
import Vue from "vue";
import { mount } from 'vue-test-utils';
import MyComponent from "./component.vue";

describe("Foo", () => {
    afterEach(() => {
        fetch.restore();
    });

    it("retrieves data", (done) => {
        var comp = mount(MyComponent);
        const response = { Title: "Hello, world" };
        fetch.get("/api/called/from/repo", response);

        Vue.nextTick(() => {
            expect(comp.html()).toContain("Hello, world");
            done();
        });
    });
}); 

The issue i have is when running this test i get:

Expected undefined to contain 'Hello, world'.
                 at eval (webpack-internal:///137:16:37)
                 at Array.eval (webpack-internal:///104:1790:12)
                 at flushCallbacks (webpack-internal:///104:1711:14)
                 at <anonymous>

The odd thing is that if i change the implementation of populate() to something that just returns a promise directly, then this works fine.

Answer 1

You can wrap your component when testing and override created function.

In your component you need to return the promise in created and populate:

    created() {
        return this.populate();
    }

    populate() {
        return new FooRepository().get().then((data: Foo) => {
            this.isLoading = false;
            this.fooData = data;
        });
    }

In your test:

    it("retrieves data", (done) => {
        let createdResult;

        const MyComponentTest = Object.assign({}, MyComponent, {
            created() {
                const res = MyComponent.created.call(this);
                createdResult = res;
                return res;
            },
        });

        const comp = mount(MyComponentText);

        const response = { Title: "Hello, world" };
        fetch.get("/api/called/from/repo", response);

        createdResult.then(() => {
            Vue.nextTick(() => {
                expect(comp.html()).toContain("Hello, world");
                done();
            });
        });
    });