Reactjs Jest模拟从连接的组件获取函数
我有一些有效的代码。然而,对于我的测试,我想模拟在组件中完成的获取 测试 我正在尝试以下方法:Reactjs Jest模拟从连接的组件获取函数,reactjs,jestjs,integration-testing,Reactjs,Jestjs,Integration Testing,我有一些有效的代码。然而,对于我的测试,我想模拟在组件中完成的获取 测试 我正在尝试以下方法: import ConnectedComponent from './Component'; import { render } from '@testing-library/react'; import user from '../__models__/user'; // arbitrary file for the response // create a mock response const
import ConnectedComponent from './Component';
import { render } from '@testing-library/react';
import user from '../__models__/user'; // arbitrary file for the response
// create a mock response
const mockSuccessResponse = user;
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
// Trying mock the refetch from http
jest.mock('./http', () => {
return {
refetch: () => ({
settingsFetch: () => mockFetchPromise,
})
}
});
it('renders', async () => {
const { getByText } = render(Component);
const title = await getByText('My title');
expect(title).toBeInTheDocument();
});
错误消息
由此,我收到以下错误:
● Test suite failed to run
TypeError: (0 , _http.refetch)(...) is not a function
应用程序代码
这段代码在我的应用程序中运行良好。举个例子:
/http.js
import { connect } from 'react-refetch';
export async function fetchWithToken(urlOrRequest, options = {}) {
// some stuff
return response;
}
export const refetch = connect.defaults({
fetch: fetchWithToken,
});
/Component.jsx
import { refetch } from './http';
const Component = ({ settingsFetch }) => <AnotherComponent settingsFetch={settingsFetch} />);
const ConnectedComponent = refetch(
({
match: { params: { someId } },
}) => ({
settingsFetch: {
url: 'http://some-url/api/v1/foo'
}
})
)(Component)
export default ConnectedComponent;
现在错误显示为:
Warning: Failed prop type: The prop `settingsFetch` is marked as required in `ConnectedComponent`, but its value is `undefined`.
这意味着我可能必须在某个地方为抓取提供模拟响应。Jest自己负责模块。因此,在下面的示例中,可以模拟来自“../http”的模块 然后,您可以通过首先添加默认道具来覆盖该模块的道具,然后使用自己的道具覆盖您需要的道具
jest.mock('../http', () => {
return {
refetch: function(hocConf) {
return function(component) {
component.defaultProps = {
...component.defaultProps,
settingsFetch: {},
// remember to add a Promise instead of an empty object here
};
return component;
};
},
};
});
感谢:
jest.mock('../http', () => {
return {
refetch: function(hocConf) {
return function(component) {
component.defaultProps = {
...component.defaultProps,
settingsFetch: {},
// remember to add a Promise instead of an empty object here
};
return component;
};
},
};
});