diff --git a/packages/jest-expect-image/package.json b/packages/jest-expect-image/package.json index 20b104f..6a30537 100644 --- a/packages/jest-expect-image/package.json +++ b/packages/jest-expect-image/package.json @@ -1,10 +1,11 @@ { "name": "jest-expect-image", "packageManager": "pnpm@8.6.3", - "version": "0.0.1", + "version": "0.1.0", "description": "", "main": "lib/index.js", "scripts": { + "prepublishOnly": "turbo run build:tsc", "build:tsc": "tsc", "build": "true" }, diff --git a/packages/next-image-snapshot/README.md b/packages/next-image-snapshot/README.md index 2a861eb..5856c39 100644 --- a/packages/next-image-snapshot/README.md +++ b/packages/next-image-snapshot/README.md @@ -2,13 +2,82 @@ ## Usage -### `renderAppPage` +Assuming you are using `jest`, you can use this package like + +```ts +// This import will add `toMatchImageSnapshot` to the `expect` global, and will make IDE autocomplete work. +import "jest-expect-image"; +import { Browsers, NextTestServer, closeAll } from "next-image-snapshot"; + +describe("User sign up page", () => { + let server!: NextTestServer; + let browsers!: Browsers; + + beforeAll(async () => { + server = await NextTestServer.create({ + dir: "./examples/next-app", + dev: true, + }); + browsers = await Browsers.all(server, ["chrome", "firefox", "safari"], { + common: { + headless: true, + }, + }); + }); + + afterAll(async () => { + await closeAll(browsers, server); + }); + + it("renders properly in all browsers", async () => { + for (const browser of browsers) { + await browser.load("/"); + + const screenshot = await browser.driver.takeScreenshot(); + + expect(screenshot).toMatchImageSnapshot(browser.name); + } + }); +}); +``` + +Note the `NestTestServer`, `Browser` and `Browsers` all support `[Symbol.asyncDispose]`. +It means, once TypeScript 5.2 is released, you will be able to do this: + +```ts +import "jest-expect-image"; +import { Browsers, NextTestServer, closeAll } from "next-image-snapshot"; + +describe("User sign up page", () => { + it("renders properly in all browsers", async () => { + using server = await NextTestServer.create({ + dir: "./examples/next-app", + dev: true, + }); + using browsers = await Browsers.all(server, ["chrome", "firefox", "safari"], { + common: { + headless: true, + }, + }); + + for (const browser of browsers) { + await browser.load("/"); + + const screenshot = await browser.driver.takeScreenshot(); + + expect(screenshot).toMatchImageSnapshot(browser.name); + } + }); +}); +``` + +### TODO: `renderAppPage` ```ts const page = await renderAppPage(() => import("./page.tsx")); ``` -### `renderPage` +### TODO: `renderPage` ```ts const page = await renderPage(() => import("./page.tsx")); diff --git a/packages/next-image-snapshot/lib/index.ts b/packages/next-image-snapshot/lib/index.ts index 2e5853a..793f4ce 100644 --- a/packages/next-image-snapshot/lib/index.ts +++ b/packages/next-image-snapshot/lib/index.ts @@ -1,6 +1,5 @@ -export class Tester { - public async render() {} -} +export * from "./browser"; +export * from "./next-server"; /** * A next.js page in app/ directory diff --git a/packages/next-image-snapshot/package.json b/packages/next-image-snapshot/package.json index 1de2cdc..b0369a6 100644 --- a/packages/next-image-snapshot/package.json +++ b/packages/next-image-snapshot/package.json @@ -1,10 +1,11 @@ { "name": "next-image-snapshot", "packageManager": "pnpm@8.6.3", - "version": "0.0.1", + "version": "0.1.0", "description": "", "main": "index.js", "scripts": { + "prepublishOnly": "turbo run build:tsc", "build:tsc": "tsc", "build": "true", "test": "jest --detectOpenHandles --no-cache",