如何测试 vuex 操作，其中 jest 里面有一个 api 调用？

Posted 2023-02-22

【中文标题】如何测试 vuex 操作，其中 jest 里面有一个 api 调用？

【英文标题】：How can I test vuex action which with jest which has an api call inside it?

【发布时间】：2019-08-09 13:25:45

【问题描述】：

ASYNC ACTION VUEX ：这是异步操作，将从 组件，它由一个函数 fetchGaragesData 组成，它将使 从服务器获取数据的 api 调用。

[ACTION_TYPES.FETCH_CASHLESS_GARAGES]: async (
         dispatch, commit, state, rootState ,
        payload
    ) => 
        commit(MUTATION_TYPES.SET_MISC_KEYS, 
            fetchingCashlessGaragesInitiated: true,
        )
        let  insurerSlug, makeId, rtoCode  = payload
        const url = ApiUrls.getCashlessGarages + `$insurerSlug/$makeId`
        const response = await fetchGaragesData(url, rtoCode)
        dispatch(ACTION_TYPES.MODIFY_RTO_WISE_GARAGES_DATA, response)
    ,

fetchGaragesData 的实现：此函数在内部调用 axios 获取：

export const fetchGaragesData = (url: string, rtoCode: string) => 
    return get(url, 
        rto_code: rtoCode,
        all_states_data: true,
    )

如何测试操作 ACTION_TYPES.FETCH_CASHLESS_GARAGES ???

【参考方案1】：

您可能有 API 模拟响应。因此，在您的规范文件中，您需要为该特定 API 调用添加模拟响应。

将您的文件包含在具有实际后端 API 调用的规范文件中。 例如：

import someName from 'path of file'

jest.mock('someName', () => (
 fetchGaragesData: jest.fn((url, rtoCode) =>
  success( body: 
    Here comes your response body
 )
)

url 和 rtoCode 应该是 API 调用文件中使用的变量的名称。