温馨提示：本站仅提供公开网络链接索引服务，不存储、不篡改任何第三方内容，所有内容版权归原作者所有
AI智能索引来源：http://www.bun.com/docs/test/snapshots
点击访问原文链接

Snapshots - Bun

进入原网站 导航首页
Snapshots - BunSkip to main contentBun home pageSearch...⌘KInstall BunSearch...NavigationTest FeaturesSnapshotsRuntimePackage ManagerBundlerTest RunnerGuidesReferenceBlogFeedbackdiv:first-child]:!hidden peer-[.is-custom]:[&>div:first-child]:sm:!hidden peer-[.is-custom]:[&>div:first-child]:md:!hidden peer-[.is-custom]:[&>div:first-child]:lg:!hidden peer-[.is-custom]:[&>div:first-child]:xl:!hidden">Getting StartedTest runnerWriting testsTest configurationTest ExecutionRuntime behaviorFinding testsTest FeaturesLifecycle hooksMocksSnapshotsDates and timesSpecialized TestingDOM testingReportingCode coverageTest ReportersOn this pageBasic SnapshotsSnapshot FilesUpdating SnapshotsInline SnapshotsUsing Inline SnapshotsError SnapshotsAdvanced Snapshot UsageComplex ObjectsArray SnapshotsFunction Output SnapshotsReact Component SnapshotsProperty MatchersCustom SerializersBest PracticesKeep Snapshots SmallUse Descriptive Test NamesGroup Related SnapshotsHandle Dynamic DataManaging SnapshotsReviewing Snapshot ChangesCleaning Up Unused SnapshotsOrganizing Large Snapshot FilesTroubleshootingSnapshot FailuresPlatform DifferencesTest FeaturesSnapshotsCopy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_2shjinpfd9rqaabsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">*]:[overflow-wrap:anywhere]">Learn how to use snapshot testing in Bun to save and compare output between test runs

Copy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_5hjinpfd9rqaabsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">Snapshot testing saves the output of a value and compares it against future test runs. This is particularly useful for UI components, complex objects, or any output that needs to remain consistent. ​Basic Snapshots Snapshot tests are written using the .toMatchSnapshot() matcher: test.tsCopyimport { test, expect } from "bun:test"; test("snap", () => { expect("foo").toMatchSnapshot(); }); The first time this test is run, the argument to expect will be serialized and written to a special snapshot file in a __snapshots__ directory alongside the test file. ​Snapshot Files After running the test above, Bun will create: directory structureCopyyour-project/ ├── snap.test.ts └── __snapshots__/ └── snap.test.ts.snap The snapshot file contains: __snapshots__/snap.test.ts.snapCopy// Bun Snapshot v1, https://bun.com/docs/test/snapshots exports[`snap 1`] = `"foo"`; On future runs, the argument is compared against the snapshot on disk. ​Updating Snapshots Snapshots can be re-generated with the following command: terminalCopybun test --update-snapshots This is useful when: You’ve intentionally changed the output You’re adding new snapshot tests The expected output has legitimately changed ​Inline Snapshots For smaller values, you can use inline snapshots with .toMatchInlineSnapshot(). These snapshots are stored directly in your test file: test.tsCopyimport { test, expect } from "bun:test"; test("inline snapshot", () => { // First run: snapshot will be inserted automatically expect({ hello: "world" }).toMatchInlineSnapshot(); }); After the first run, Bun automatically updates your test file: test.tsCopyimport { test, expect } from "bun:test"; test("inline snapshot", () => { expect({ hello: "world" }).toMatchInlineSnapshot(` { "hello": "world", } `); }); ​Using Inline Snapshots Write your test with .toMatchInlineSnapshot() Run the test once Bun automatically updates your test file with the snapshot On subsequent runs, the value will be compared against the inline snapshot Inline snapshots are particularly useful for small, simple values where it’s helpful to see the expected output right in the test file. ​Error Snapshots You can also snapshot error messages using .toThrowErrorMatchingSnapshot() and .toThrowErrorMatchingInlineSnapshot(): test.tsCopyimport { test, expect } from "bun:test"; test("error snapshot", () => { expect(() => { throw new Error("Something went wrong"); }).toThrowErrorMatchingSnapshot(); expect(() => { throw new Error("Another error"); }).toThrowErrorMatchingInlineSnapshot(); }); After running, the inline version becomes: test.tsCopytest("error snapshot", () => { expect(() => { throw new Error("Something went wrong"); }).toThrowErrorMatchingSnapshot(); expect(() => { throw new Error("Another error"); }).toThrowErrorMatchingInlineSnapshot(`"Another error"`); }); ​Advanced Snapshot Usage ​Complex Objects Snapshots work well with complex nested objects: test.tsCopyimport { test, expect } from "bun:test"; test("complex object snapshot", () => { const user = { id: 1, name: "John Doe", email: "john@example.com", profile: { age: 30, preferences: { theme: "dark", notifications: true, }, }, tags: ["developer", "javascript", "bun"], }; expect(user).toMatchSnapshot(); }); ​Array Snapshots Arrays are also well-suited for snapshot testing: test.tsCopyimport { test, expect } from "bun:test"; test("array snapshot", () => { const numbers = [1, 2, 3, 4, 5].map(n => n * 2); expect(numbers).toMatchSnapshot(); }); ​Function Output Snapshots Snapshot the output of functions: test.tsCopyimport { test, expect } from "bun:test"; function generateReport(data: any[]) { return { total: data.length, summary: data.map(item => ({ id: item.id, name: item.name })), timestamp: "2024-01-01", // Fixed for testing }; } test("report generation", () => { const data = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, ]; expect(generateReport(data)).toMatchSnapshot(); }); ​React Component Snapshots Snapshots are particularly useful for React components: test.tsCopyimport { test, expect } from "bun:test"; import { render } from "@testing-library/react"; function Button({ children, variant = "primary" }) { return button className={`btn btn-${variant}`}>{children}button>; } test("Button component snapshots", () => { const { container: primary } = render(Button>Click meButton>); const { container: secondary } = render(Button variant="secondary">CancelButton>); expect(primary.innerHTML).toMatchSnapshot(); expect(secondary.innerHTML).toMatchSnapshot(); }); ​Property Matchers For values that change between test runs (like timestamps or IDs), use property matchers: test.tsCopyimport { test, expect } from "bun:test"; test("snapshot with dynamic values", () => { const user = { id: Math.random(), // This changes every run name: "John", createdAt: new Date().toISOString(), // This also changes }; expect(user).toMatchSnapshot({ id: expect.any(Number), createdAt: expect.any(String), }); }); The snapshot will store: snapshot fileCopyexports[`snapshot with dynamic values 1`] = ` { "createdAt": Any, "id": Any, "name": "John", } `; ​Custom Serializers You can customize how objects are serialized in snapshots: test.tsCopyimport { test, expect } from "bun:test"; // Custom serializer for Date objects expect.addSnapshotSerializer({ test: val => val instanceof Date, serialize: val => `"${val.toISOString()}"`, }); test("custom serializer", () => { const event = { name: "Meeting", date: new Date("2024-01-01T10:00:00Z"), }; expect(event).toMatchSnapshot(); }); ​Best Practices ​Keep Snapshots Small test.tsCopy// Good: Focused snapshots test("user name formatting", () => { const formatted = formatUserName("john", "doe"); expect(formatted).toMatchInlineSnapshot(`"John Doe"`); }); // Avoid: Huge snapshots that are hard to review test("entire page render", () => { const page = renderEntirePage(); expect(page).toMatchSnapshot(); // This could be thousands of lines }); ​Use Descriptive Test Names test.tsCopy// Good: Clear what the snapshot represents test("formats currency with USD symbol", () => { expect(formatCurrency(99.99)).toMatchInlineSnapshot(`"$99.99"`); }); // Avoid: Unclear what's being tested test("format test", () => { expect(format(99.99)).toMatchInlineSnapshot(`"$99.99"`); }); ​Group Related Snapshots test.tsCopyimport { describe, test, expect } from "bun:test"; describe("Button component", () => { test("primary variant", () => { expect(render(Button variant="primary">ClickButton>)) .toMatchSnapshot(); }); test("secondary variant", () => { expect(render(Button variant="secondary">CancelButton>)) .toMatchSnapshot(); }); test("disabled state", () => { expect(render(Button disabled>DisabledButton>)) .toMatchSnapshot(); }); }); ​Handle Dynamic Data test.tsCopy// Good: Normalize dynamic data test("API response format", () => { const response = { data: { id: 1, name: "Test" }, timestamp: Date.now(), requestId: generateId(), }; expect({ ...response, timestamp: "TIMESTAMP", requestId: "REQUEST_ID", }).toMatchSnapshot(); }); // Or use property matchers test("API response with matchers", () => { const response = getApiResponse(); expect(response).toMatchSnapshot({ timestamp: expect.any(Number), requestId: expect.any(String), }); }); ​Managing Snapshots ​Reviewing Snapshot Changes When snapshots change, carefully review them: terminalCopy# See what changed git diff __snapshots__/ # Update if changes are intentional bun test --update-snapshots # Commit the updated snapshots git add __snapshots__/ git commit -m "Update snapshots after UI changes" ​Cleaning Up Unused Snapshots Bun will warn about unused snapshots: warningCopyWarning: 1 unused snapshot found: my-test.test.ts.snap: "old test that no longer exists 1" Remove unused snapshots by deleting them from the snapshot files or by running tests with cleanup flags if available. ​Organizing Large Snapshot Files For large projects, consider organizing tests to keep snapshot files manageable: directory structureCopytests/ ├── components/ │ ├── Button.test.tsx │ └── __snapshots__/ │ └── Button.test.tsx.snap ├── utils/ │ ├── formatters.test.ts │ └── __snapshots__/ │ └── formatters.test.ts.snap ​Troubleshooting ​Snapshot Failures When snapshots fail, you’ll see a diff: diffCopy- Expected + Received Object { - "name": "John", + "name": "Jane", } Common causes: Intentional changes (update with --update-snapshots) Unintentional changes (fix the code) Dynamic data (use property matchers) Environment differences (normalize the data) ​Platform Differences Be aware of platform-specific differences: test.tsCopy// Paths might differ between Windows/Unix test("file operations", () => { const result = processFile("./test.txt"); expect({ ...result, path: result.path.replace(/\\/g, "/"), // Normalize paths }).toMatchSnapshot(); });

Was this page helpful?

YesNoSuggest editsRaise issueMocksPreviousDates and timesNext⌘IxgithubdiscordyoutubePowered by

智能索引记录