[Vuejs]-Vuejs test a function that returns a Promise on "Created" hook

by

0👍

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

Leave a comment