我正在尝试使用 React Relay 和 React 测试库测试组件
// @flow
import { Suspense } from 'react';
import {
RelayEnvironmentProvider,
useLazyLoadQuery,
graphql,
} from 'react-relay/hooks';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';
import { render, cleanup, screen, act } from '@testing-library/react';
import Banner from './Banner';
jest.mock('react-router-dom', () => ({
useLocation: jest.fn(() => ({
pathname: 'some-path',
})),
}));
describe('<Banner>', () => {
let mockEnvironment;
const defaultMockResolver = {
// We do not want a consistent return in this case since we want the default MockPayloadGenerator behavior for most fields
// See https://relay.dev/docs/en/testing-relay-components#mock-resolver-context
// eslint-disable-next-line consistent-return
String(context) {
if (context.name === 'viewer') {
return {id: 111 };
}
},
};
beforeEach(() => {
mockEnvironment = createMockEnvironment();
});
afterEach(cleanup);
it('renders - snapshot', () => {
mockEnvironment = createMockEnvironment();
const RelayComponent = () => {
const data = useLazyLoadQuery(
graphql`
query BannerTestQuery @relay_test_operation {
viewer {
# Spread the fragment you want to test here
...Banner_viewer
}
}
`,
{},
);
return <Banner viewer={data.myData} />;
};
render(
<RelayEnvironmentProvider environment={mockEnvironment}>
<Suspense fallback="Loading...">
<RelayComponent />
</Suspense>
</RelayEnvironmentProvider>,
);
// expect(container.firstChild).toMatchSnapshot();
act(() => {
mockEnvironment.mock.resolveMostRecentOperation(operation =>
MockPayloadGenerator.generate(operation, defaultMockResolver),
);
});
screen.debug();
});
});
然而,该测试不会使用模拟数据加载组件,而只会返回 Suspense 回退