时间戳

首页 > 解决方案 > TypeError: (0 , _ApiCalls.default) 不是一个测试 axios 调用的函数

reactjs - TypeError: (0 , _ApiCalls.default) 不是一个测试 axios 调用的函数

问题描述

我对 Jest 很陌生，我完成了对项目所有组件的测试，现在当我想测试 axios 调用时，我正面临这个错误。

我的测试

import addPatients from '../ApiCalls/ApiCalls'
test('patient data is posted',  () => {

    addPatients(data).then(response=>{
    console.log(response.data)

    })
});

api.js

    export  function addPatients (state){
        console.log(state)
      try {
            const response =  axios.post('/addpatient', state); 
           // add patient calls rails controller, basically I'm using react on rails 
console.log(response);
            return response;
        }
        catch (error) {
            console.log(error);
        }
         };

该项目运行良好，但我无法对其进行测试。当我运行此测试时，我收到以下错误

TypeError: (0 , _ApiCalls.default) 不是函数

  22 | test('patient data is posted',  () => {
  23 |   
> 24 |     addPatients(data).then(response=>{
     |     ^
  25 |     console.log(response.data)
  26 |     
  27 |     })

  at Object.<anonymous> (app/javascript/components/__tests__/Api.test.js:24:5)

我试过：

  1. 向函数添加导出默认值
  2. 添加异步和等待

从几天开始尝试，似乎没有任何效果。请指导我对此进行测试，因为只有待处理的工作是测试。

标签： reactjsreact-reduxjestjsaxiosenzyme

解决方案

所以，首先正如@EstusFlask 在评论部分指出的那样，我以错误的方式导入它。

改变了

import addPatients from '../ApiCalls/ApiCalls' to import {addPatients}
from '../ApiCalls/ApiCalls'

然后，我没有正确地嘲笑这个电话，我发布了带有解释的代码，以便对某些人有所帮助。

调用 Api 的函数

 export  function addPatients (state){
            const response =  axios.post('/addpatient', state);
            return response;
        };

测试用例

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter';
import {addPatients} from '../ApiCalls/ApiCalls'

const data ={
            "patientage":"patientage",
            "patientname":"test",
            "patientgender":"patientgender",
            "patientinsurance":"patientinsurance",
            "patientphone":"patientphone",
            "patientdiagnosis":"patientdiagnosis",
            "patientaddreq":"patientaddreq",
            "patientemr":"patientemr"
            }

const mockresponse = {
                       Status:'200'
                     }

describe('addnewpatient', () => {

it('should post patient data', () => {
      const mockRequest = new MockAdapter(axios);
      mockRequest.onPost('/addpatient').reply(200,mockresponse);

return addPatients(data).then(response => expect(response.data.Status).toEqual('200'));
    });
  });

因此，mockrequest 所做的基本上是每当 addpatient 函数调用 api 而不是调用实际的 api 时，它会调用我们创建的模拟 axios 请求以及我们提供的数据。

在这种情况下，模拟拦截时

  • 调用“/addpatient”
  • 模拟响应返回我们提供的数据，在本例中为数据 Status='200'

稍后您可以比较 api 函数接收到的数据和您使用 expect 提供的模拟数据。在我的情况下，'/addpatient' 调用 rails 控制器，url 可以是与您的项目相关的任何内容

推荐阅读