Skip to content

v1.3.0

Compare
Choose a tag to compare
@richardguerre richardguerre released this 30 Jul 20:16
· 29 commits to master since this release
2b2f109
  • Adds seed option (#1)
  • Adds forceInstantInitialLoading global option (#2)

Notable updates:
Useful in visual test tools like Stroybook's Chromatic (https://chromatic.com/) or Percy (https://percy.io) where you need consistent data to render the same UI and prevent false positives.

You can set it when invoking createUseRelayMockEnvironment:

const useRelayMockEnvironment = createUseRelayMockEnvironment({
  // ... your other options
  seed: 'my seed' // can be a string or number
});

And/or set it when using the hook:

const environment = useRelayMockEnvironment({
  // ... your other options
  seed: 123 // can be a string or number
});

Note: When it is set in both createUseRelayMockEnvironment and useRelayMockEnvironment, the seed in useRelayMockEnvironment takes priority.


When using a visual testing tool like Chromatic, you can enforce having consistent fake data by providing the seed, instantInitialLoading and/or forceInstantInitialLoading options. We recommend passing these options at the global level, when invoking createRelayMockEnvironmentHook():

// useRelayMockEnvironment.(js | jsx | ts | tsx)
import { createRelayMockEnvironmentHook } from 'use-relay-mock-environment';
import isChromatic from 'chromatic/isChromatic';

const useRelayMockEnvironment = createRelayMockEnvironmentHook({
  ...(isChromatic()
    ? {
        seed: 123, // can be anything you want (string or number)
        forceInstantInitialLoading: true,
      }
    : {}),
  // Add any other global options here (optional)
});

export default useRelayMockEnvironment;