使用axios-mock-adapter对axios请求进行mock

在使用jest和enzyme对react进行单元测试时，如果我们需要对axios的请求进行测试，可以使用axios-mock-adapter。

这里只是拿单元测试举例，正常逻辑里的mock也可以使用，但是既然单元测试都通过了正常逻辑里不用也无所谓了（因为正常逻辑里加了后面也得删...）。

vSwitch.ui.jsx代码如下：（看黄色部分即可）

import React, { useState, useEffect } from "react";
import axios from '../../../request';
import { Form, Input, Select } from 'antd';
import { FetchAvailabilityZoneURL } from "../url";

const { Option } = Select;
const TextArea = Input.TextArea;

const ReactRender = (props) => {
    const { type, cellId, db } = props;
    const { getFieldDecorator } = props.form;
    const doc = db.getDoc(type, cellId);
    const vpcDoc = db.getDocByRefId(doc.vpc_id);
    let vpcName = vpcDoc.name;
    const onSubmit = (e) => {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                // 所属vPC始终要用vpc_id的值保存
                values.vpc_id = doc.vpc_id;
                db.updateDoc(type, cellId, values);
            }
        });
    };

    let [allData, setData] = useState(() => {
        return { availabilityZoneData: [] };
    });

    useEffect(() => {
        axios.post(FetchAvailabilityZoneURL, { "multi": true })
            .then((response) => {
                const availabilityZoneData = response.data.ids;
                setData(allData => ({
                    ...allData,
                    availabilityZoneData
                }));
            }).catch((error) => {
            });
    }, []);

    return (
        <Form onChange={onSubmit} onClick={onSubmit}>
            <Form.Item label="名称">
                {getFieldDecorator('name', {
                    initialValue: doc.name,
                    rules: [{ required: true, message: '请填写名称' }],
                })(<Input />)}
            </Form.Item>
            <Form.Item label="描述">
                {getFieldDecorator('description', {
                    initialValue: doc.description
                })(<TextArea rows={5} />)}
            </Form.Item>
            <Form.Item label="所属vPC">
                <React.Fragment>
                    {getFieldDecorator('vpc_id', {
                        initialValue: vpcName,
                        rules: [{ required: true, message: '自动关联vPC' }],
                    })(<Input hidden />)}
                    <span>{vpcName}</span>
                </React.Fragment>
            </Form.Item>
            <Form.Item label="IPv4地址范围">
                {getFieldDecorator('cidr_block', {
                    initialValue: doc.cidr_block,
                    rules: [{
                        required: true, message: '请填写IPv4地址范围'
                    }, {
                        pattern: /^([0-9]{1,3}\.){3}[0-9]{1,3}(\/([0-9]|[1-2][0-9]|3[0-2]))?$/,
                        message: '请填写正确的CIDR（如：192.168.11.0/16）'
                    }],
                })(<Input />)}
            </Form.Item>
            <Form.Item label="可用区">
                {getFieldDecorator('availability_zone', {
                    initialValue: doc.availability_zone || undefined,
                    rules: [{ required: true, message: '请选择可用区' }],
                })(
                    <Select
                        showSearch
                        style={{ width: '100%' }}
                        placeholder="请选择可用区"
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        {
                            allData.availabilityZoneData && allData.availabilityZoneData.map(item =>
                                <Option key={item} value={item}>{item}</Option>
                            )
                        }
                    </Select>
                )}
            </Form.Item>
        </Form>
    )
};

export default Form.create()(ReactRender);

 

vSwitch.test.jsx代码如下：（看黄色部分即可）

import MockAdapter from "axios-mock-adapter";
import axios from "../../../request";
import VSwitch from "../component/vSwitch";
import { mount } from 'enzyme';
import { FetchAvailabilityZoneURL } from "../url";
import { getDatabase, getGlobalID } from "../../../database";

describe("vSwitch测试", () => {
    const mock = new MockAdapter(axios);
    const vSwitch = new VSwitch();
    const db = getDatabase();
    // 模仿UI操作，添加一个cell，然后立即调用渲染方法
    vSwitch.onAdd("alicloud_vswitch", { id: 1 });
    const wrapper = mount(vSwitch.render("alicloud_vswitch", 1));
    // 为select下拉框设置默认值
    // const component = wrapper.dive();
    wrapper.instance().setFieldsValue({
        availability_zone: `cn-shanghai-a`,
    });

    it('render', () => {
        const data = { ids: ["cn-shanghai-a", "cn-shanghai-b", "cn-shanghai-c", "cn-shanghai-d", "cn-shanghai-e", "cn-shanghai-f"] };
        mock.onPost(FetchAvailabilityZoneURL).reply(
                (config) => {
                    return new Promise(function (resolve, reject) {
                        resolve([200, data]);
                    }).then(() => {
                        wrapper.find('#availability_zone .ant-select-selection__rendered').simulate('click');
                        expect(wrapper.find('.ant-select-dropdown-menu li').length).toBe(6);
                    });
                }
            );

        expect(wrapper.find("FormItem").length).toBe(5);
        expect(wrapper.find("FormItem").first().props().label).toBe('名称');
        expect(wrapper.find("FormItem").get(1).props.label).toBe('描述');
        expect(wrapper.find("FormItem").get(2).props.label).toBe('所属vPC');
        expect(wrapper.find("FormItem").get(3).props.label).toBe('IPv4地址范围');
        expect(wrapper.find("FormItem").last().props().label).toBe('可用区');
    });

    it('onInParent', () => {
        const vpcCellId = 10;
        const vpcDoc = db.saveDoc("alicloud_vpc", vpcCellId, {
            name: "test",
            cidr_block: "10.10.0.0/16",
            description: "test"
        });
        // 和vPC建立关系
        const vpcCell = { data: { type: "alicloud_vpc", provider: "alicloud" }, id: vpcCellId };
        vSwitch.onInParent("alicloud_vswitch", { id: 1 }, vpcCell);
        const vswtichDoc = db.getDoc("alicloud_vswitch", 1);
        expect(vswtichDoc.vpc_id).toBe(getGlobalID(vpcDoc));
    });

    it('onInputChange', () => {
        wrapper.find('input').at(0).simulate('change', { target: { value: "test_vswitch_name" } });
        expect(wrapper.find('input').at(0).prop('value')).toBe('test_vswitch_name');
        wrapper.find('input').at(1).simulate('change', { target: { value: "test_vpc_description" } });
        expect(wrapper.find('input').at(1).prop('value')).toBe('test_vpc_description');
        wrapper.find('input').at(3).simulate('change', { target: { value: "192.168.11.0/16" } });
        expect(wrapper.find('input').at(3).prop('value')).toBe('192.168.11.0/16');
        wrapper.find('#availability_zone .ant-select-selection__rendered').simulate('click');
        wrapper.find('.ant-select-dropdown-menu li').at(0).simulate('click');
        expect(wrapper.find('.ant-select-selection-selected-value').prop('title')).toBe('cn-shanghai-a');
    });

    it('onDelete', () => {
        // 删除alicloud_vswitch
        vSwitch.onDelete("alicloud_vswitch", { id: 1 });
        const vswtichDoc = db.getDoc("alicloud_vswitch", 1);
        expect(vswtichDoc).toBeUndefined();
    });
});

 

总的来说就是要在Promise的回调里测试才是有效的。