{"id":20083641,"url":"https://github.com/marko-js/fixture-snapshots","last_synced_at":"2025-06-25T06:05:19.267Z","repository":{"id":35961042,"uuid":"220536187","full_name":"marko-js/fixture-snapshots","owner":"marko-js","description":"A tool for loading fixtures and creating snapshot tests","archived":false,"fork":false,"pushed_at":"2023-10-05T17:08:59.000Z","size":1777,"stargazers_count":4,"open_issues_count":10,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-05T11:07:18.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marko-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-08T19:41:26.000Z","updated_at":"2024-05-11T17:06:11.000Z","dependencies_parsed_at":"2024-06-19T05:29:10.012Z","dependency_job_id":"4a25231a-aca4-4495-aeac-2309160b9ccc","html_url":"https://github.com/marko-js/fixture-snapshots","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/marko-js/fixture-snapshots","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Ffixture-snapshots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Ffixture-snapshots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Ffixture-snapshots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Ffixture-snapshots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/fixture-snapshots/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Ffixture-snapshots/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260139805,"owners_count":22964711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T15:48:10.889Z","updated_at":"2025-06-25T06:05:19.232Z","avatar_url":"https://github.com/marko-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003c!-- Logo --\u003e\n  \u003cbr/\u003e\n  @marko/fixture-snapshots\n\t\u003cbr/\u003e\n\n  \u003c!-- Stability --\u003e\n  \u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/stability-stable-brightgreen.svg\" alt=\"API Stability\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Language --\u003e\n  \u003ca href=\"http://typescriptlang.org\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg\" alt=\"TypeScript\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Format --\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"Styled with prettier\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- CI --\u003e\n  \u003ca href=\"https://travis-ci.org/marko-js/fixture-snapshots\"\u003e\n  \u003cimg src=\"https://img.shields.io/travis/marko-js/fixture-snapshots.svg\" alt=\"Build status\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Version --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/fixture-snapshots\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@marko/fixture-snapshots.svg\" alt=\"NPM Version\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/fixture-snapshots\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/@marko/fixture-snapshots.svg\" alt=\"Downloads\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Size --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/fixture-snapshots\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/size-1.21kb-green.svg\" alt=\"Browser Bundle Size\"/\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\nA tool for working with Marko component fixtures given the following directory structure:\n\n```bash\nsrc/\n  components/\n    app-carousel/\n      fixtures/\n        fixture1.js # exports data to render app-carousel/index.marko with\n        fixture2.json # data to render app-carousel/index.marko with\n        fixture3.marko # a template assumed to use \u003capp-carousel\u003e\n      index.marko\n```\n\n## Installation\n\nYou probably already have `marko` installed, but you'll also need [`@marko/testing-library`](https://github.com/marko-js/testing-library) since it is used to render the fixtures.\n\n```console\nnpm install marko @marko/fixture-snapshots @marko/testing-library\n```\n\n## Automatic Snapshot API\n\n### `runSnapshotTests(path: string, options?: SnapshotOptions)` (default export)\n\nLoads all the fixtures under `path` and generates tests that render them and compare/generate snapshots:\n\n```bash\nfixtures/\n  fixture1.js\n  fixture1.html # snapshot of app-carousel/index.marko rendered with data from fixture1.js\n  fixture2.json\n  fixture2.html # snapshot of app-carousel/index.marko rendered with data from fixture2.json\n  fixture3.marko\n  fixture3.html # snapshot of fixture3.marko\n```\n\n```typescript\ntype SnapshotOptions = {\n  normalizer: (container: Element | Fragment) =\u003e Element | Fragment;\n  // a function the recieves a DOM container and returns a normalized DOM tree.\n  // The normalizer function should not mutate the existing tree\n  // (default: `require(\"@marko/fixture-snapshots\").defaultNormalizer`)\n\n  ignore: string[]; // directories to not search for fixtures in (default: [\"node_modules\"])\n  fixtureDir: string; // the name of the fixture directory to search for (default: \"fixtures\")\n};\n```\n\n#### Usage with Jest\n\n```javascript\nimport runSnapshotTests from \"@marko/fixture-snapshots/jest\";\n// const runSnapshotTests = require(\"@marko/fixture-snapshots/jest\").default;\n\ndescribe(\"fixture snapshots\", () =\u003e {\n  runSnapshotTests(__dirname);\n});\n```\n\n\u003e You can use `jest`'s built-in [snapshot updating](https://jestjs.io/docs/en/snapshot-testing#updating-snapshots) (`jest -u`) to update the fixture snapshots\n\n#### Usage with Mocha\n\n```javascript\nimport runSnapshotTests from \"@marko/fixture-snapshots/mocha\";\n// const runSnapshotTests = require(\"@marko/fixture-snapshots/mocha\").default;\n\ndescribe(\"fixture snapshots\", () =\u003e {\n  runSnapshotTests(__dirname);\n});\n```\n\n\u003e You can set `UPDATE_SNAPSHOTS` as an [environment variable](https://en.wikipedia.org/wiki/Environment_variable) (`UPDATE_SNAPSHOTS=true mocha`) to update the fixture snapshots\n\n## API\n\n```js\nimport {\n  findAllFixtures,\n  defaultSerializer,\n  defaultNormalizer\n} from \"@marko/fixture-snapshots\";\n```\n\n### `findComponentFixtures(file: string, options?: ComponentOptions): ComponentFixtures`\n\nLoads the fixtures for the component at `file`.\n\n```typescript\ntype ComponentOptions = {\n  fixtureDir: string; // the name of the fixture directory to search for (default: \"fixtures\")\n};\n\ntype ComponentFixtures = {\n  name: string; // the inferred name of the component (ex. app-carousel)\n  path: string; // the absolute path to the component\n  component: Template; // the loaded Marko template\n  fixturesPath: string;\n  fixtures: Record\u003c\n    string, // the inferred name of the fixture (ex. data)\n    {\n      name: string;\n      path: string; // the absolute path to the fixture\n      ext: \".js\" | \".json\" | \".marko\";\n      fixture: object | Template; // the loaded fixture\n      render: () =\u003e RenderResult; // render the fixture, return type is the same as `@marko/testing-library`'s render function\n      toString: (normalizer = defaultNormalizer) =\u003e Promise\u003cstring\u003e;\n    }\n  \u003e;\n};\n```\n\n#### Example\n\n```js\nimport { fireEvent } from \"@marko/testing-library\";\nimport { findComponentFixtures } from \"@marko/fixture-snapshots\";\nconst { fixtures } = findComponentFixtures(require.resolve(\"../index.marko\"));\n\ntest(\"example\", () =\u003e {\n  const result = await fixtures.example.render();\n  const button = result.getByRole(\"button\");\n  await fireEvent.click(button);\n  expect(result.emitted(\"clicky-click\")).toHaveLength(1);\n});\n```\n\n### `findProjectFixtures(dir: string, options?: ProjectOptions): ComponentFixtures[]`\n\nLoads the fixtures for all components found under `dir`.\n\n```typescript\ntype ProjectOptions = {\n  ignore: string[]; // directories to not search for fixtures in (default: [\"node_modules\"])\n  fixtureDir: string; // the name of the fixture directory to search for (default: \"fixtures\")\n};\n```\n\n### `defaultSerializer(container: Element | Fragment): string`\n\nSerializes the DOM container to a diffable HTML string\n\n### `defaultNormalizer(container: Element | Fragment): Element | Fragment`\n\nReturns a clone of the passed DOM container with Marko's internal markers removed (`data-marko`, etc.)\n\n## Code of Conduct\n\nThis project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Ffixture-snapshots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Ffixture-snapshots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Ffixture-snapshots/lists"}