[英]How can I mock useAxios hook from axios-hooks using Jest? (Error: Uncaught [TypeError: undefined is not a function])
I am new to Jest, and I want to mock useAxios
from axios-hooks
in order to avoid actually calling a service.我是 Jest 的新手,我想从axios-hooks
模拟useAxios
以避免实际调用服务。 This is my copmonent:这是我的共同点:
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
This is the test I am implementing:这是我正在实施的测试:
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()
})
})
However, I am getting the following error:但是,我收到以下错误:
Error: Uncaught [TypeError: undefined is not a function]
How can I solve this issue?我该如何解决这个问题?
The useAxios
hook returns an array, whereas your mockImplementation
is returning a Promise. useAxios
挂钩返回一个数组,而您的mockImplementation
返回一个 Promise。
const [{ data, loading, error }] = useAxios(/* ... */); // returns array
useAxios.mockImplementation(() => Promise.resolve({fakeResponse})) // returns Promise
Changing mockImplementation
to return an array containing an object with one, some or all of the fields data/loading/error
will work:更改mockImplementation
以返回包含 object 的数组,其中包含一个、部分或所有字段data/loading/error
将起作用:
useAxios.mockImplementation(() => [
{
data: fakeResponse
}
])
Since the implementation doesn't mock the behaviour of useAxios
(it mocks the return value) you can use mockReturnValue
instead:由于实现不模拟useAxios
的行为(它模拟返回值),您可以使用mockReturnValue
代替:
useAxios.mockReturnValue([
{
data: fakeResponse
}
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.