Last active
December 28, 2022 06:46
-
-
Save dohooo/1893a754d3d4eb8ec5d9d1633737d7a5 to your computer and use it in GitHub Desktop.
How to test file via visual testing.
This file contains hidden or 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 hidden or 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 hidden or 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