Merge pull request #17 from chanzuckerberg/sn/generate-snapshots

Await an act in generateSnapshots to resolve warnings

packages/story-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/story-utils",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "keywords": [
     "stories",

packages/story-utils/src/generateSnapshots.ts

@@ -2,6 +2,7 @@ import { render, RenderResult } from '@testing-library/react';
 import { getStoriesFromStoryFileExports } from './getStories';
 import type { StoryData, StoryFileExports } from './getStories';
 import prepareStory from './prepareStory';
+import wait from './wait';
 
 type TestOptions<Args> = {
   /**
@@ -40,6 +41,12 @@ export default function generateSnapshots<
 
     test(`${storyName} story renders snapshot`, async () => {
       const view = render(prepareStory(story.storyFn, argOverrides));
+
+      // When components that include Apollo's useQuery are rendered we need
+      // to await an act that pushes the test to the end of the event loop.
+      // https://trojanowski.dev/apollo-hooks-testing-without-act-warnings/
+      await wait();
+
       expect(await getSnapshot(view)).toMatchSnapshot();
     });
   }

packages/story-utils/src/index.ts

@@ -1,3 +1,4 @@
 export { default as generateSnapshots } from './generateSnapshots';
 export { default as getStories } from './getStories';
 export { default as prepareStory } from './prepareStory';
+export { default as wait } from './wait';

packages/story-utils/src/wait.ts

@@ -0,0 +1,9 @@
+import { act } from '@testing-library/react';
+
+export default async function wait(ms = 0): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}