Skip to content

Instantly share code, notes, and snippets.

@dohooo
Last active December 28, 2022 06:46
Show Gist options
  • Save dohooo/1893a754d3d4eb8ec5d9d1633737d7a5 to your computer and use it in GitHub Desktop.
Save dohooo/1893a754d3d4eb8ec5d9d1633737d7a5 to your computer and use it in GitHub Desktop.
How to test file via visual testing.
import "@testing-library/jest-dom";
import { setProjectAnnotations } from "@storybook/react";
import "jest-styled-components";
import { decorators } from "../../.storybook/withEditor";
setProjectAnnotations({ decorators });
import type { Meta, StoryFn } from "@storybook/react";
import { composeStories } from "@storybook/react";
import { render } from "@testing-library/react";
import { toMatchImageSnapshot } from "jest-image-snapshot";
import { chromium, type Browser, type Page } from "playwright";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
expect.extend({ toMatchImageSnapshot });
interface StoryFile {
default: Meta
[name: string]: StoryFn | Meta
}
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
const stories = await Promise.all<StoryFile>(
Object.values(import.meta.glob<StoryFile>("./components/**/*.stories.tsx")).map(m => m()),
);
it.each(
stories
.reduce((acc, i) => [...acc, ...Object.values(composeStories(i))], [] as StoryFn[])
.map(i => [String(i.parameters?.__id), i]),
)("%s", (_, Story) => {
const { container } = render(<Story />);
expect(container).toMatchSnapshot();
});
describe("visual testing", async () => {
const snaps = (await Promise.all(
Object.values(import.meta.glob("./__snapshots__/*.snap") || {}).map(m => m()),
)).map((i: any) => {
return i.default;
}).reduce((acc, i) => {
return { ...acc, ...i };
}, {});
const snapKeys = Object.keys(snaps);
if (snapKeys.length === 0) {
return it.skip("");
}
it.each(snapKeys.map((snapKey) => {
return [snapKey];
}))("%s", async (snapKey) => {
const storyID = String(snapKey).replace(/\s/g, "_");
const snapContent = snaps[snapKey];
const splitIndex = String(snapContent).indexOf("<div>");
const styles = `<style>${String(snapContent).slice(0, splitIndex)}</style>`;
const content = `<div style="display:inline-block;" id="${storyID}">${String(snapContent).slice(splitIndex)}</div>`;
const html = `${styles}${content}`;
await page.setContent(html);
await page.waitForSelector(`#${storyID}`, { state: "visible" });
const target = (await page.$$(`#${storyID}`))[0];
const demission = await target.boundingBox();
const { x, y, width, height } = demission!;
const screenshot = await page.screenshot({ clip: { x, y, width, height } });
expect(screenshot).toMatchImageSnapshot({ customSnapshotIdentifier: storyID });
});
});
import { withBaseConfig } from "../../vite.base.config";
export default withBaseConfig(__dirname)({
build: {
target: "es2020",
rollupOptions: {
external: ["@craftjs/core"],
},
},
resolve: {
alias: {
"@": "/src",
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/tests/setup.ts",
coverage: {
reporter: ["text", "json", "html"],
},
cache: false,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment