Mocking Axios множественные ответы в модульном тестировании - PullRequest
Новая
       18

Mocking Axios множественные ответы в модульном тестировании

0 голосов
/ 31 марта 2019

У меня есть простой компонент Vue, который выбирает ключ API при его создании, и ключ можно обновить, нажав на кнопку: 

<template>
    <div>
        <div>{{data.api_key}}</div>
        <button ref="refresh-trigger" @click="refreshKey()">refresh</button>
    </div>
</template>
<script>
    export default {
        created() {
            axios.get(this.url).then((response) => {
                this.data = response.data
            })
        }
        methods: {
            refreshKey() {
                axios.put(this.url).then((response) => {
                    this.data = response.data
                })
            },
        }
    }
</script>

И я хочу проверить его с помощью этого кода: 

import {shallowMount} from '@vue/test-utils';
import axios from 'axios';
import apiPage from '../apiPage';

jest.mock('axios');

describe('API page', () => {
    it('should fetch API key on component creation', done => {
        const initialData = {
            api_key: 'initial_API_key',
        };
        const newData = {
            api_key: 'new_API_key',
        };

        axios.get.mockImplementationOnce(() =>
                Promise.resolve({
                    data: initialData,
                })
            )
        axios.put.mockImplementationOnce(() =>
                Promise.resolve({
                    data: newData,
                })
            );


        const wrapper = shallowMount(apiPage);
        expect(wrapper.vm.$data.data.api_key).toBeFalsy();

        wrapper.vm.$nextTick(() => {

expect(wrapper.vm.$data.data.api_key).toEqual(initialData.api_key);
             done()
        });

        wrapper.find({ref: 'refresh-trigger'}).trigger('click');

        wrapper.vm.$nextTick(() => {
            expect(wrapper.vm.$data.data.api_key).toEqual(newData.api_key)
            done()
        })
    });
    })

Но оказывается, что высмеивается только первое значение, потому что я получаю: 

    [Vue warn]: Error in nextTick: "Error: expect(received).toEqual(expected)

Difference:

    - Expected
    + Received

    - new_API_key
    + initial_API_key"

found in

---> <Anonymous>
<Root>

console.error node_modules/vue/dist/vue.runtime.common.dev.js:1883
{ Error: expect(received).toEqual(expected)

Что я делаю не так?Может быть, есть несколько способов проверить, был ли вызван созданный обратный вызов и все ли внутри него асинхронные функции выполнены?

...