要解决"Apollo的MockedProvider不为通过withApollo包装的组件提供客户端"的问题,可以使用jest.mock
函数来模拟Apollo提供的withApollo
高阶组件,并手动传递一个模拟的Apollo客户端作为参数。以下是一个示例解决方案:
__mocks__
文件夹(如果不存在),并在其中创建一个withApollo.js
文件。这个文件将包含模拟的withApollo
高阶组件。// __mocks__/withApollo.js
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import { MockedProvider } from '@apollo/react-testing';
export default function withApollo(Component) {
// 创建一个模拟的Apollo客户端
const mocksClient = new MockedProvider().client;
return (props) => (
// 使用模拟的ApolloProvider包装组件
);
}
jest.mock
来模拟withApollo
高阶组件。这将使通过withApollo
包装的组件使用模拟的Apollo客户端。// MyComponent.test.js
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import MyComponent from './MyComponent';
import withApollo from 'withApollo';
// 使用jest.mock来模拟withApollo
jest.mock('withApollo');
describe('MyComponent', () => {
beforeEach(() => {
// 清理dom
cleanup();
// 重置模拟
withApollo.mockClear();
// 模拟withApollo并传递组件
withApollo.mockImplementation((Component) => Component);
});
it('should render without error', () => {
// 渲染组件
render( );
// 进行断言...
});
});
通过这种方式,您可以在使用ApolloProvider
的组件中模拟Apollo客户端,并且可以测试它们与其他组件的交互。