Created
January 5, 2023 04:25
-
-
Save n3ps/49bb07b034de0828b3fe27c4efadb51e to your computer and use it in GitHub Desktop.
Relay helper for React Testing Library
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { RelayEnvironmentProvider, useLazyLoadQuery } from 'react-relay'; | |
| import { createMockEnvironment } from 'relay-test-utils'; | |
| import { render } from '@testing-library/react'; | |
| /* | |
| Usage: | |
| const query = graphql` | |
| query Query @relay_test_operation { | |
| node { | |
| ...MyComponentFragment | |
| } | |
| } | |
| ` | |
| relayRender(query, (data) => <MyComponent {...data} />) | |
| */ | |
| /** | |
| * Wraps RTL's `render` method with a Relay mock environment and query containing a fragment | |
| * @param query GraphQL query with fragment spread | |
| * @param component Component under test | |
| */ | |
| export function relayRender(query, component) { | |
| const environment = createMockEnvironment(); | |
| render( | |
| <RelayEnvironmentProvider environment={environment}> | |
| <QueryWrapper query={query}>{component}</QueryWrapper> | |
| </RelayEnvironmentProvider>, | |
| ); | |
| return { | |
| environment, | |
| }; | |
| } | |
| function QueryWrapper({ children, query }) { | |
| const data = useLazyLoadQuery(query, {}); | |
| return children(data); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment