How to test file via visual testing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "@testing-library/jest-dom"; | |
import { setProjectAnnotations } from "@storybook/react"; | |
import "jest-styled-components"; | |
import { decorators } from "../../.storybook/withEditor"; | |
setProjectAnnotations({ decorators }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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