Adjust tests for Vitest 3

code/core/src/preview-api/modules/preview-web/PreviewWeb.integration.test.ts

@@ -104,122 +104,118 @@ beforeEach(() => {
  * Skipping this test, because it causes a cyclical dependency error, where core depends on docs &
  * blocks This was done to avoid a conflict in the CPC work, we should revisit this.
  */
-describe.skip(
+describe('PreviewWeb', { skip: true }, () => {
-  'PreviewWeb',
+  describe('initial render', () => {
-  () => {
+    it('renders story mode through the stack', async () => {
-    describe('initial render', () => {
+      const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-      it('renders story mode through the stack', async () => {
+      projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
-        const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-        projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
 
-        projectAnnotations.renderToCanvas.mockImplementationOnce(
+      projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext<any>) =>
-          ({ storyFn }: RenderContext<any>) => storyFn()
+        storyFn()
-        );
+      );
-        document.location.search = '?id=component-one--a';
+      document.location.search = '?id=component-one--a';
-        await new PreviewWeb(importFn, getProjectAnnotations).ready();
+      await new PreviewWeb(importFn, getProjectAnnotations).ready();
 
-        await waitForRender();
+      await waitForRender();
 
-        await vi.waitFor(() => {
+      await vi.waitFor(() => {
-          expect(projectAnnotations.decorators[0]).toHaveBeenCalled();
+        expect(projectAnnotations.decorators[0]).toHaveBeenCalled();
-          expect(projectAnnotations.render).toHaveBeenCalled();
+        expect(projectAnnotations.render).toHaveBeenCalled();
-        });
-      });
-
-      it('renders docs mode through docs page', async () => {
-        const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-        projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
-
-        document.location.search = '?id=component-one--docs&viewMode=docs';
-        const preview = new PreviewWeb(importFn, getProjectAnnotations);
-
-        const docsRoot = document.createElement('div');
-        vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any);
-        componentOneExports.default.parameters.docs.container.mockImplementationOnce(() =>
-          React.createElement('div', {}, 'INSIDE')
-        );
-
-        await preview.ready();
-
-        await vi.waitFor(
-          () => {
-            if (docsRoot.outerHTML !== '<div><div>INSIDE</div></div>') {
-              throw new Error('DocsRoot not ready yet');
-            }
-          },
-          {
-            timeout: 2000,
-          }
-        );
-
-        expect(docsRoot.outerHTML).toMatchInlineSnapshot('"<div><div>INSIDE</div></div>"');
-
-        // Extended timeout to try and avoid
-        // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing
-      }, 10_000);
-
-      it('sends docs rendering exceptions to showException', async () => {
-        const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-        projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
-
-        document.location.search = '?id=component-one--docs&viewMode=docs';
-        const preview = new PreviewWeb(importFn, getProjectAnnotations);
-
-        const docsRoot = document.createElement('div');
-        vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any);
-        componentOneExports.default.parameters.docs.container.mockImplementation(() => {
-          throw new Error('Docs rendering error');
-        });
-
-        vi.mocked(preview.view.showErrorDisplay).mockClear();
-
-        await preview.ready();
-
-        await vi.waitFor(
-          () => {
-            expect(preview.view.showErrorDisplay).toHaveBeenCalled();
-          },
-          {
-            timeout: 2000,
-          }
-        );
       });
     });
 
-    describe('onGetGlobalMeta changed (HMR)', () => {
+    it('renders docs mode through docs page', async () => {
-      const newGlobalDecorator = vi.fn((s) => s());
+      const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-      const newGetProjectAnnotations = () => {
+      projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
-        return {
+
-          ...projectAnnotations,
+      document.location.search = '?id=component-one--docs&viewMode=docs';
-          args: { a: 'second' },
+      const preview = new PreviewWeb(importFn, getProjectAnnotations);
-          globals: { a: 'second' },
+
-          decorators: [newGlobalDecorator],
+      const docsRoot = document.createElement('div');
-        };
+      vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any);
+      componentOneExports.default.parameters.docs.container.mockImplementationOnce(() =>
+        React.createElement('div', {}, 'INSIDE')
+      );
+
+      await preview.ready();
+
+      await vi.waitFor(
+        () => {
+          if (docsRoot.outerHTML !== '<div><div>INSIDE</div></div>') {
+            throw new Error('DocsRoot not ready yet');
+          }
+        },
+        {
+          timeout: 2000,
+        }
+      );
+
+      expect(docsRoot.outerHTML).toMatchInlineSnapshot('"<div><div>INSIDE</div></div>"');
+
+      // Extended timeout to try and avoid
+      // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing
+    }, 10_000);
+
+    it('sends docs rendering exceptions to showException', async () => {
+      const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
+      projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
+
+      document.location.search = '?id=component-one--docs&viewMode=docs';
+      const preview = new PreviewWeb(importFn, getProjectAnnotations);
+
+      const docsRoot = document.createElement('div');
+      vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any);
+      componentOneExports.default.parameters.docs.container.mockImplementation(() => {
+        throw new Error('Docs rendering error');
+      });
+
+      vi.mocked(preview.view.showErrorDisplay).mockClear();
+
+      await preview.ready();
+
+      await vi.waitFor(
+        () => {
+          expect(preview.view.showErrorDisplay).toHaveBeenCalled();
+        },
+        {
+          timeout: 2000,
+        }
+      );
+    });
+  });
+
+  describe('onGetGlobalMeta changed (HMR)', () => {
+    const newGlobalDecorator = vi.fn((s) => s());
+    const newGetProjectAnnotations = () => {
+      return {
+        ...projectAnnotations,
+        args: { a: 'second' },
+        globals: { a: 'second' },
+        decorators: [newGlobalDecorator],
       };
+    };
 
-      it('renders story mode through the updated stack', async () => {
+    it('renders story mode through the updated stack', async () => {
-        const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
+      const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
-        projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
+      projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
 
-        document.location.search = '?id=component-one--a';
+      document.location.search = '?id=component-one--a';
-        const preview = new PreviewWeb(importFn, getProjectAnnotations);
+      const preview = new PreviewWeb(importFn, getProjectAnnotations);
-        await preview.ready();
+      await preview.ready();
-        await waitForRender();
+      await waitForRender();
 
-        projectAnnotations.renderToCanvas.mockImplementationOnce(
+      projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext<any>) =>
-          ({ storyFn }: RenderContext<any>) => storyFn()
+        storyFn()
-        );
+      );
-        projectAnnotations.decorators[0].mockClear();
+      projectAnnotations.decorators[0].mockClear();
-        mockChannel.emit.mockClear();
+      mockChannel.emit.mockClear();
-        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
 
-        await vi.waitFor(() => {
+      await vi.waitFor(() => {
-          expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled();
+        expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled();
-          expect(newGlobalDecorator).toHaveBeenCalled();
+        expect(newGlobalDecorator).toHaveBeenCalled();
-          expect(projectAnnotations.render).toHaveBeenCalled();
+        expect(projectAnnotations.render).toHaveBeenCalled();
-        });
       });
     });
-  },
+  });
-  { retry: 0 }
+});
-);

code/frameworks/angular/src/client/docs/angular-properties.test.ts

@@ -18,20 +18,20 @@ describe('angular component properties', () => {
           expect(true).toEqual(true);
         });
         // TODO: Fix this test
-        // it(`${testEntry.name}`, () => {
+        // it(`${testEntry.name}`, async () => {
         //   const inputPath = join(testDir, testFile);
 
         //   // snapshot the output of compodoc
         //   const compodocOutput = runCompodoc(inputPath);
         //   const compodocJson = JSON.parse(compodocOutput);
-        //   expect(compodocJson).toMatchFileSnapshot(
+        //   await expect(compodocJson).toMatchFileSnapshot(
         //     join(testDir, `compodoc-${SNAPSHOT_OS}.snapshot`)
         //   );
 
         //   // snapshot the output of addon-docs angular-properties
         //   const componentData = findComponentByName('InputComponent', compodocJson);
         //   const argTypes = extractArgTypesFromData(componentData);
-        //   expect(argTypes).toMatchFileSnapshot(join(testDir, 'argtypes.snapshot'));
+        //   await expect(argTypes).toMatchFileSnapshot(join(testDir, 'argtypes.snapshot'));
         // });
       }
     }

code/lib/codemod/src/transforms/__tests__/transforms.tests.js

@@ -24,8 +24,8 @@ readdirSync(fixturesDir).forEach((transformName) => {
       .filter((fileName) => inputRegExp.test(fileName))
       .forEach((fileName) => {
         const inputPath = join(transformFixturesDir, fileName);
-        it(`transforms correctly using "${fileName}" data`, () =>
+        it(`transforms correctly using "${fileName}" data`, async () =>
-          expect(
+          await expect(
             applyTransform(require(join(__dirname, '..', transformName)), null, {
               path: inputPath,
               source: fs.readFileSync(inputPath, 'utf8'),

code/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts

@@ -25,7 +25,7 @@ async function generate(filePath: string) {
         it(`${fixtureFile}`, async () => {
           const inputPath = join(transformFixturesDir, fixtureFile);
           const code = await generate(inputPath);
-          expect(code).toMatchFileSnapshot(inputPath.replace(inputRegExp, '.snapshot'));
+          await expect(code).toMatchFileSnapshot(inputPath.replace(inputRegExp, '.snapshot'));
         });
       });
   });

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -77,8 +77,8 @@ describe('renders', () => {
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
   });
 
-  it('should throw an error in play function', () => {
+  it('should throw an error in play function', async () => {
-    expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+    await expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
   });
 
   it('should call and compose loaders data', async () => {

code/renderers/react/src/docs/extractArgTypes.test.ts

@@ -71,12 +71,12 @@ describe('react component properties', () => {
         if (skippedTests.includes(testEntry.name)) {
           it.skip(`${testEntry.name}`, () => {});
         } else {
-          it(`${testEntry.name}`, () => {
+          it(`${testEntry.name}`, async () => {
             const inputPath = join(testDir, testFile);
 
             // snapshot the output of babel-plugin-react-docgen
             const docgenPretty = annotateWithDocgen(inputPath);
-            expect(docgenPretty).toMatchFileSnapshot(join(testDir, 'docgen.snapshot'));
+            await expect(docgenPretty).toMatchFileSnapshot(join(testDir, 'docgen.snapshot'));
 
             // transform into an uglier format that's works with require-from-string
             const docgenModule = transformToModule(docgenPretty);
@@ -84,7 +84,7 @@ describe('react component properties', () => {
             // snapshot the output of component-properties/react
             const { component } = requireFromString(docgenModule, inputPath);
             const properties = extractProps(component);
-            expect(properties).toMatchFileSnapshot(join(testDir, 'properties.snapshot'));
+            await expect(properties).toMatchFileSnapshot(join(testDir, 'properties.snapshot'));
 
             // snapshot the output of `extractArgTypes`
             const argTypes = extractArgTypes(component);
@@ -93,7 +93,7 @@ describe('react component properties', () => {
               argTypes,
               parameters,
             } as unknown as StoryContext<Renderer>);
-            expect(rows).toMatchFileSnapshot(join(testDir, 'argTypes.snapshot'));
+            await expect(rows).toMatchFileSnapshot(join(testDir, 'argTypes.snapshot'));
           });
         }
       }

code/renderers/web-components/src/docs/web-components-properties.test.ts

@@ -46,7 +46,7 @@ describe('web-components component properties', () => {
       const testDir = join(fixturesDir, testEntry.name);
       const testFile = readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
-        it(`${testEntry.name}`, () => {
+        it(`${testEntry.name}`, async () => {
           const inputPath = join(testDir, testFile);
 
           // snapshot the output of wca
@@ -55,11 +55,13 @@ describe('web-components component properties', () => {
           customElements.tags.forEach((tag: any) => {
             tag.path = 'dummy-path-to-component';
           });
-          expect(customElements).toMatchFileSnapshot(join(testDir, 'custom-elements.snapshot'));
+          await expect(customElements).toMatchFileSnapshot(
+            join(testDir, 'custom-elements.snapshot')
+          );
 
           // snapshot the properties
           const properties = extractArgTypesFromElements('input', customElements);
-          expect(properties).toMatchFileSnapshot(join(testDir, 'properties.snapshot'));
+          await expect(properties).toMatchFileSnapshot(join(testDir, 'properties.snapshot'));
         });
       }
     }

docs/_snippets/individual-snapshot-tests-portable-stories.md

@@ -15,7 +15,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
     );
   }
 };
@@ -23,7 +23,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
   );
 
   return storyFiles.map((filePath) => {
@@ -45,7 +45,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
         );
       }
 
@@ -157,7 +157,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
     );
   }
 };
@@ -166,7 +166,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    }),
+    })
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -185,7 +185,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
         );
       }
 
@@ -196,7 +196,7 @@ describe('Stories Snapshots', () => {
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
           const customSnapshotPath = `./__snapshots__/${componentName}.spec.js.snap`;
-          expect(document.body.firstChild).toMatchFileSnapshot(customSnapshotPath);
+          await expect(document.body.firstChild).toMatchFileSnapshot(customSnapshotPath);
         });
       });
     });
@@ -226,7 +226,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
     );
   }
 };
@@ -236,7 +236,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    }),
+    })
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -256,7 +256,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
         );
       }
 
@@ -267,7 +267,7 @@ describe('Stories Snapshots', () => {
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
           const customSnapshotPath = `./__snapshots__/${componentName}.spec.ts.snap`;
-          expect(document.body.firstChild).toMatchFileSnapshot(customSnapshotPath);
+          await expect(document.body.firstChild).toMatchFileSnapshot(customSnapshotPath);
         });
       });
     });

docs/_snippets/portable-stories-vitest-multi-snapshot-test.md

@@ -18,9 +18,9 @@ describe(options.suite, () => {
           const snapshotPath = path.join(
             storyDir,
             options.snapshotsDirName,
-            `${componentName}${options.snapshotExtension}`,
+            `${componentName}${options.snapshotExtension}`
           );
-          expect(document.body.firstChild).toMatchFileSnapshot(snapshotPath);
+          await expect(document.body.firstChild).toMatchFileSnapshot(snapshotPath);
         });
       });
     });