GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 03:11:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adjust tests for Vitest 3

Browse Source
This commit is contained in:
Valentin Palkovic 2025-01-03 11:53:19 +01:00
parent 09196b1fe7
commit e61762b41a
9 changed files with 132 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(
'PreviewWeb',
() => {
describe('initial render', () => {
it('renders story mode through the stack', async () => {
const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
describe('PreviewWeb', { skip: true }, () => {
describe('initial render', () => {
it('renders story mode through the stack', async () => {
const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
projectAnnotations.renderToCanvas.mockImplementationOnce(
({ storyFn }: RenderContext<any>) => storyFn()
);
document.location.search = '?id=component-one--a';
await new PreviewWeb(importFn, getProjectAnnotations).ready();
projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext<any>) =>
storyFn()
);
document.location.search = '?id=component-one--a';
await new PreviewWeb(importFn, getProjectAnnotations).ready();
await waitForRender();
await waitForRender();
await vi.waitFor(() => {
expect(projectAnnotations.decorators[0]).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,
}
);
await vi.waitFor(() => {
expect(projectAnnotations.decorators[0]).toHaveBeenCalled();
expect(projectAnnotations.render).toHaveBeenCalled();
});
});
describe('onGetGlobalMeta changed (HMR)', () => {
const newGlobalDecorator = vi.fn((s) => s());
const newGetProjectAnnotations = () => {
return {
...projectAnnotations,
args: { a: 'second' },
globals: { a: 'second' },
decorators: [newGlobalDecorator],
};
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)', () => {
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 () => {
const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
it('renders story mode through the updated stack', async () => {
const { DocsRenderer } = await import('../../../../../addons/docs/src/index');
projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb(importFn, getProjectAnnotations);
await preview.ready();
await waitForRender();
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb(importFn, getProjectAnnotations);
await preview.ready();
await waitForRender();
projectAnnotations.renderToCanvas.mockImplementationOnce(
({ storyFn }: RenderContext<any>) => storyFn()
);
projectAnnotations.decorators[0].mockClear();
mockChannel.emit.mockClear();
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext<any>) =>
storyFn()
);
projectAnnotations.decorators[0].mockClear();
mockChannel.emit.mockClear();
preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
await vi.waitFor(() => {
expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled();
expect(newGlobalDecorator).toHaveBeenCalled();
expect(projectAnnotations.render).toHaveBeenCalled();
});
await vi.waitFor(() => {
expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled();
expect(newGlobalDecorator).toHaveBeenCalled();
expect(projectAnnotations.render).toHaveBeenCalled();
});
});
},
{ retry: 0 }
);
});
});

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

@ -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'));
// });
}
}

4
code/lib/codemod/src/transforms/__tests__/transforms.tests.js
View File

@ -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`, () =>
expect(
it(`transforms correctly using "${fileName}" data`, async () =>
await expect(
applyTransform(require(join(__dirname, '..', transformName)), null, {
path: inputPath,
source: fs.readFileSync(inputPath, 'utf8'),

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

@ -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'));
});
});
});

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

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

8
code/renderers/react/src/docs/extractArgTypes.test.ts
View File

@ -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'));
});
}
}

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

@ -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'));
});
}
}

22
docs/_snippets/individual-snapshot-tests-portable-stories.md
View File

@ -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);
});
});
});

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

@ -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);
});
});
});