Jest does not continue after async method

Question

I have an async method triggered by a click event where I make a call to an API and then process the response, like this:

async confirmName () {
    const {name, description} = this.form;
    const [data, error] = await Pipelines.createPipeline({name, description});

    if (error) {
        console.error(error);
        this.serviceError = true;
        return false;
    }

    this.idPipelineCreated = data.pipeline_id;
    return true;
}

The test looks like this:

test("API success", async () => {
    const ConfirmNameBtn = wrapper.find(".form__submit-name");
    await ConfirmNameBtn.vm.$emit("click");

    const pipelinesApi = new Pipelines();
    jest.spyOn(pipelinesApi, "createPipeline").mockResolvedValue({pipeline_id: 100});

    const {name, description} = wrapper.vm.form;

    pipelinesApi.createPipeline().then(data => {
        expect(wrapper.vm.pipelineNameServiceError).toBe(false);

        wrapper.setData({
            idPipelineCreated: data.pipeline_id
        });

        expect(wrapper.vm.idPipelineCreated).toBe(data.pipeline_id)
    }).catch(() => {})

})

A basic class mock:

export default class Pipelines {
    constructor () {}

    createPipeline () {}
}

I'm testing a success API call and I mock the API call returning a resolved promised. The problem is the coverage only covers the first two lines of the method, not the part where I assign the response of the API call. Is this the correct approach?

Edit:

Screenshot of coverage report:

Anatoly · Answer 1 · 2022-02-15T18:04:17.447

0

Don't mix up await and then/catch. Prefer using await unless you have very special cases (see this answer):

test("API success", async () => {
    const ConfirmNameBtn = wrapper.find(".form__submit-name");
    await ConfirmNameBtn.vm.$emit("click");

    const pipelinesApi = new Pipelines();
    jest.spyOn(pipelinesApi, "createPipeline").mockResolvedValue({pipeline_id: 100});

    const {name, description} = wrapper.vm.form;
    const data = await pipelinesApi.createPipeline();

    expect(wrapper.vm.pipelineNameServiceError).toBe(false);

    wrapper.setData({
        idPipelineCreated: data.pipeline_id
    });

    expect(wrapper.vm.idPipelineCreated).toBe(data.pipeline_id)
    expect(wrapper.vm.serviceError).toBe(false);
})

edited Feb 15 '22 at 18:04

answered Feb 15 '22 at 17:38

Anatoly

20,799
3
28
42

I have changed that bit, but still have the same issue, coverage of only the destructuring of the form and the api call. – Ismael Ordás Feb 15 '22 at 17:49
Can you show the coverage report? – Anatoly Feb 15 '22 at 17:52
I added an screenshot of it. – Ismael Ordás Feb 15 '22 at 17:55
Shouldn't you test `confirmName` call directly? – Anatoly Feb 15 '22 at 18:05
You mean calling the method inside the test? If I do that, it will trigger the real API call, not the mock one. – Ismael Ordás Feb 15 '22 at 18:08
Then just mock the whole module and that's it – Anatoly Feb 15 '22 at 18:11
You mean the API module? It's there a way to call the component method but using an API mock? – Ismael Ordás Feb 15 '22 at 20:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242049/discussion-between-ismael-ordas-and-anatoly). – Ismael Ordás Feb 15 '22 at 20:15
That's the whole idea of mocking, isn't it? – Anatoly Feb 15 '22 at 21:41

Jest does not continue after async method

1 Answers1