如何使用 Jest 从 axios-hooks 模拟 useAxios 钩子？ （错误：未捕获 [TypeError: undefined is not a function]）

Question

我是 Jest 的新手，我想从axios-hooks模拟useAxios以避免实际调用服务。 这是我的共同点：

import React from 'react'
import useAxios from 'axios-hooks'
import { Table, Space } from 'antd'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit, faCalendar, faUserPlus } from '@fortawesome/free-solid-svg-icons'

const Projects = () => {
  const [{ data: projects, loading, error }] = useAxios(
    `${process.env.REACT_APP_API_URL}/projects/`
  )

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error!</p>

  const columns = [
    {
      title: 'Title',
      dataIndex: 'title',
      key: 'title',
      render: title => <a>{title}</a>
    },
    {
      title: 'Start Date',
      dataIndex: 'startDate',
      key: 'startDate'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      render: description => `${description.substring(0, 50)}...`
    },
    {
      title: 'Team',
      dataIndex: 'team',
      key: 'team'
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size='middle'>
          <FontAwesomeIcon icon={faEdit} />
          <FontAwesomeIcon icon={faCalendar} />
          <FontAwesomeIcon icon={faUserPlus} />
        </Space>
      )
    }
  ]

  return (
    <Table
      data-testid='project-table-id'
      columns={columns}
      dataSource={projects}
      pagination={false}
    />
  )
}

export default Projects

这是我正在实施的测试：

import React from 'react'
import { render, cleanup } from '@testing-library/react'
import Projects from '../Projects'
import useAxios from 'axios-hooks'
jest.mock('axios-hooks')

describe('Projects component', () => {
  afterEach(cleanup)

  it('renders project table', async () => {
    const fakeResponse = [
      {
        title: 'Testing Project Alpha',
        startDate: '2020-04-18',
        description: 'This is just for testing',
        team: 'A, B, C'
      },
      {
        title: 'Testing Project Beta',
        startDate: '2020-04-19',
        description: 'This is just for testing too',
        team: 'X, Y, Z'
      }
    ]
    useAxios.mockImplementation(() => Promise.resolve({fakeResponse}))
    const { getByTestId } = render(<Projects />)
    expect(getByTestId('project-table-id')).not.toBeNull()
  })
})

但是，我收到以下错误：

Error: Uncaught [TypeError: undefined is not a function]

我该如何解决这个问题？

Answer 1

useAxios挂钩返回一个数组，而您的mockImplementation返回一个 Promise。

const [{ data, loading, error }] = useAxios(/* ... */); // returns array

useAxios.mockImplementation(() => Promise.resolve({fakeResponse})) // returns Promise

更改mockImplementation以返回包含 object 的数组，其中包含一个、部分或所有字段data/loading/error将起作用：

useAxios.mockImplementation(() => [
  {
    data: fakeResponse
  }
])

由于实现不模拟useAxios的行为（它模拟返回值），您可以使用mockReturnValue代替：

useAxios.mockReturnValue([
  {
    data: fakeResponse
  }
]);