时间戳

首页 > 解决方案 > 使用 mock-axios-adapter 模拟 put 请求

vue.js - 使用 mock-axios-adapter 模拟 put 请求

问题描述

我有一个简单的 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';
import MockAdapter from 'axios-mock-adapter';



describe('API page', () => {
    it('should renew API key it on refresh', async (done) => {
        const flushPromises = () => new Promise(resolve => setTimeout(resolve))
        const initialData = {
            api_key: 'initial_API_key',
        };
        const newData = {
            api_key: 'new_API_key',
        };
        const mockAxios = new MockAdapter(axios);

        mockAxios.onGet('/someurl.json').replyOnce(200, initialData)
        mockAxios.onPut('/someurl.json').replyOnce(200, newData);

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

        await flushPromises()

        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(() => {
            console.log(mockAxios.history)

            expect(wrapper.vm.$data.data.api_key).toEqual(newData.api_key);

            expect(mockAxios.history.get.length).toBe(1);
            expect(mockAxios.history.get[1].data).toBe(JSON.stringify(initialData));

            expect(mockAxios.history.put.length).toBe(1);
            done();
        });
    })
});

但事实证明只有 get 请求被嘲笑，因为我收到：

        [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)

更糟糕的是，console.log(mockAxios.history)返回空的 put 数组：

{ get:
   [ { transformRequest: [Object],
       transformResponse: [Object],
       timeout: 0,
       xsrfCookieName: 'XSRF-TOKEN',
       xsrfHeaderName: 'X-XSRF-TOKEN',
       maxContentLength: -1,
       validateStatus: [Function: validateStatus],
       headers: [Object],
       method: 'get',
       url: '/admin/options/api.json',
       data: undefined } ],
  post: [],
  head: [],
  delete: [],
  patch: [],
  put: [],
  options: [],
  list: [] }

我尝试在 describe 块中定义 mockAxios，并在迭代后对其进行 console.log - 结果证明 put 请求就在这里。但不是在我需要的时候。:)

我究竟做错了什么？也许有一些方法可以检查是否调用了创建的回调并且其中的所有异步函数都已完成？也许我使用 axios-mock 错误？

标签： vue.jsmockingaxiosaxios-mock-adapter

解决方案

此测试代码应通过：

import {shallowMount, createLocalVue} from '@vue/test-utils';
import axios from 'axios';
import api from '@/components/api.vue';
import MockAdapter from 'axios-mock-adapter';
describe('API page', () => {
    it('should renew API key it on refresh', async () => {
        const flushPromises = () => new Promise(resolve => setTimeout(resolve))
        const initialData = {
            api_key: 'initial_API_key',
        };
        const newData = {
            api_key: 'new_API_key',
        };
        const mockAxios = new MockAdapter(axios);
        const localVue = createLocalVue();
        mockAxios
          .onGet('/someurl.json').reply(200, initialData)
          .onPut('/someurl.json').reply(200, newData);

        const wrapper = shallowMount(api, {
          localVue,
        });
        expect(wrapper.vm.$data.data.api_key).toBeFalsy();

        await flushPromises();
        expect(wrapper.vm.$data.data.api_key).toEqual(initialData.api_key);
        wrapper.find({ref: 'refresh-trigger'}).trigger('click');
        await flushPromises();
        console.log(mockAxios.history);
        expect(wrapper.vm.$data.data.api_key).toEqual(newData.api_key);

        expect(mockAxios.history.get.length).toBe(1);
        expect(mockAxios.history.put.length).toBe(1);

    })
});

几点注意事项：

  1. 我更喜欢将响应链接到 mockAxios 对象上，这样您就可以按 URL 对它们进行分组，以便清楚您正在模拟哪个端点：
mockAxios
  .onGet('/someurl.json').reply(200, initialData)
  .onPut('/someurl.json').reply(200, newData);

mockAxios
  .onGet('/anotherUrl.json').reply(200, initialData)
  .onPut('/anotherUrl.json').reply(200, newData);

  1. 如果您想测试您只对端点进行了一次 GET 调用（使用expect(......get.length).toBe(1)），那么您应该真正使用reply()而不是replyOnce()并按照您已经这样做的方式对其进行测试。该replyOnce()函数将在第一次回复后删除处理程序，您将在后续请求中收到 404。

  2. mockAxios.history.get[1].data不会包含任何内容，原因有 3 个：GET 请求没有正文（只有 URL 参数），您只发出了 1 个 GET 请求（这里您检查的是第 2 个 GET），并且此语句指的是发送的请求，而不是您收到的数据。

  3. 您正在使用async/await功能，这意味着您可以利用该功能 $nextTick:await wrapper.vm.$nextTick();并一起放弃done()呼叫，但既然您已经拥有flushPromises()，您不妨使用它。

  4. 您无需使用此行测试您在第一次调用中是否收到了 initialData： expect(mockAxios.history.get[1].data).toBe(JSON.stringify(initialData));因为您已经使用expect(...).toEqual(apiKey).

  5. 使用createLocalVue()实用程序为每个挂载创建 Vue 的本地实例，以避免污染全局 Vue 实例（如果您有多个测试组，则很有用）

最后， 7. 最好将这个测试分成多个it语句；单元测试应该是微测试，即测试一个小的、清晰可识别的行为。尽管我没有为您分解测试，因此它包含尽可能少的更改，但我强烈建议您这样做。

推荐阅读