使用react relay进行测试时组件未呈现

Question

我正在尝试使用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();
});
});

然而，该测试不加载带有模拟数据的组件，而只返回暂停回退

Answer 1

这实际上是有效的：https://githubmemory.com/repo/facebook/relay/issues/3276

重要的是，在渲染组件之前调用queueOperationResolver。

Answer 2

尝试在此处添加更多详细信息。同意Tassilo Singhammer的回答。在渲染之前，需要调用queueOperationResolver。在queueOperationResolver中，您需要通过MockPayloadGenerator生成模拟有效负载。这是熊最小的例子：

test('Data Render', () => {
const environment = createMockEnvironment();
environment.mock.queueOperationResolver((operation:any) =>
MockPayloadGenerator.generate(operation),
);

const renderer = ReactTestRenderer.create( 
<RelayEnvironmentProvider environment={environment}>
<Suspense fallback={<div data-testid="loading">Loading... </div>}>
<HelmetProvider>
<MemoryRouter>
<Home /> // Your component with the useLazyLoadQuery or a QueryRenderer
</MemoryRouter>
</HelmetProvider>
</Suspense>
</RelayEnvironmentProvider>);
// At this point operation will be resolved
// and the data for a query will be available in the store
expect(
renderer.root.find(node => node.props['data-testid'] === 'yourButton'),
).toBeDefined();
});

就我而言，我需要HelmetProvider和MemoryRouter。如果不需要，您可以跳过。以下是官方文件：https://relay.dev/docs/guides/testing-relay-components/#example-带有队列操作解析程序