javascript - Jest - 模拟内部 axios API 调用

标签 javascript reactjs jestjs axios

我看到有人问类似的问题 here ,但我不知道是否我只是不理解或者这是一个不同的情况?我有一个钩子(Hook),它公开了一个名为 fetchPeople 的函数,该函数调用一个 search 函数,该函数最终是我正在进行的 api 调用。我已经遵循了 Jest 中有关模拟 axios 的示例,但似乎我的测试仍然(可能)进行物理 api 调用,并且没有返回我解析的模拟值。通过调试我发现响应是这样的:

baseURL: "mock.api.imirwin.com"
headers: {}
responseType: "json"
__proto__: Object

这是我的代码的结构:

服务/people.js

async function search(params) {
 const response = await axios.get(url)

 return {
  data: response.data,
  links: response.links,
  count: response.count,
 }
}

useSearchPeople.js

import { searchPeople } from 'services/people'

const fetchPeople = async term => {
 const { data } = await searchPeople({ term })

 return formatPeople(data)
}

useSearchPeople.test.js

import useSearchPeople from './useSearchPeople'
import axios from 'axios'

const { fetchPeople } = useSearchPeople()

jest.mock('axios')

describe('useSearchPeople', () => {
 it('returns an array of people', async () => {
  axios.get.mockResolvedValue(response)
  const data = await fetchPeople('term')
 )}
}

我从中得到的错误是:

    TypeError: Cannot read property 'total' of undefined

      138 |     data: deserializerAndCase().deserialize(response),
      139 |     links: response.links,
    > 140 |     count: response.meta.total,
          |                          ^
      141 |   }
      142 | }

据我了解,这意味着正在调用 api,但未返回模拟响应。

通过摆弄,我注意到如果我模拟我的服务jest.mock('services/people'),它不会进行物理调用,但模拟的响应仍然不会返回,但我得到了这个错误

    TypeError: Cannot destructure property `data` of 'undefined' or 'null'.
      32 | const fetchPeople = async term => {
    > 33 |   const { data } = await searchPeople({ term })
         |         ^
      34 |   return formatPeople(data)
      35 | }
      36 | 

任何见解将不胜感激。 编辑:我应该补充一点,我最终要测试的是 formatPeople 函数

最佳答案

如果我原来的问题不符合标准,我深表歉意。我尽力 chop 最相关的信息,但意识到我可能遗漏了超出应有信息的信息。好消息是我最终解决了我的问题。如果有人遇到同样的情况,这对我有用:

在我的 useSearchPeople.test.js 中,我发现我可以模拟 useSearchPeople 中的 fetchPeople 函数中使用的 api 函数的实际导入.js 钩子(Hook)。我所做的是这样的:

useSearchPeople.test.js

import { useSearchPeople } from './useSearchPeople'
import { searchPeople } from 'services/people'

const response = { data: [{}] }
const { fetchPeople } = useSearchPeople()

jest.mock('services/people', () => {
 return {
   search: jest.fn().mockReturnValue(response)
 }
})

describe('useSearchPeople hook', () => {
 it('returns data from external api call', async () => {
  const data = await fetchPeople('something')

  expect(data.length).toBe(1)
 }
})

关于javascript - Jest - 模拟内部 axios API 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62942295/

相关文章:

javascript - 是否有可能通过 http 获取用户位置,或者 https 是唯一的解决方案?

reactjs - React + Jest + Enzyme 表单 onSubmit 测试失败,除非我使用超时

jestjs - 开 Jest 异步测试 - expect.assertion 似乎是全局性的

javascript - Backbone.js - 发出 POST 请求而不保存模型

javascript - Selenium 中通过 jQuery 生成获取元素

javascript - 如何使用 ag-grid 中的复选框更改 bool 数据?

javascript - Angular ui 路由器重定向不起作用

javascript - react.js - 在 requestAnimationFrame 上渲染

javascript - 我不知道为什么我会得到这个,如果它是根据 React 手册的话

javascript - Next.js 和 Jest : SyntaxError: Cannot use import statement outside a module