{"id":19787164,"url":"https://github.com/guidepup/jest","last_synced_at":"2025-04-30T23:33:09.114Z","repository":{"id":205766144,"uuid":"715000228","full_name":"guidepup/jest","owner":"guidepup","description":"Screen reader accessibility matchers for jest","archived":false,"fork":false,"pushed_at":"2024-09-24T05:59:45.000Z","size":268,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-14T11:43:37.725Z","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/guidepup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS.md","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["cmorten"]}},"created_at":"2023-11-06T09:30:17.000Z","updated_at":"2024-09-24T05:59:47.000Z","dependencies_parsed_at":"2024-01-27T23:27:19.885Z","dependency_job_id":"bff871d5-cc18-4959-927c-3708aa950a4d","html_url":"https://github.com/guidepup/jest","commit_stats":null,"previous_names":["guidepup/jest"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidepup%2Fjest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidepup%2Fjest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidepup%2Fjest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidepup%2Fjest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guidepup","download_url":"https://codeload.github.com/guidepup/jest/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224227183,"owners_count":17276756,"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-12T06:21:25.897Z","updated_at":"2024-11-12T06:21:26.405Z","avatar_url":"https://github.com/guidepup.png","language":"TypeScript","funding_links":["https://github.com/sponsors/cmorten"],"categories":[],"sub_categories":[],"readme":"# Virtual Screen Reader Jest Matchers\n\n\u003ca href=\"https://www.npmjs.com/package/@guidepup/jest\"\u003e\u003cimg alt=\"Virtual Screen Reader Jest Matchers available on NPM\" src=\"https://img.shields.io/npm/v/@guidepup/jest\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/guidepup/jest/actions/workflows/test.yml\"\u003e\u003cimg alt=\"Virtual Screen Reader Jest Matchers test workflows\" src=\"https://github.com/guidepup/jest/workflows/Test/badge.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/guidepup/jest/blob/main/LICENSE\"\u003e\u003cimg alt=\"Virtual Screen Reader Jest Matchers uses the MIT license\" src=\"https://img.shields.io/github/license/guidepup/jest\" /\u003e\u003c/a\u003e\n\n## Intro\n\nThis package aims to supplement your unit testing by enabling you to snapshot the output of a [Virtual Screen Reader](https://github.com/guidepup/virtual-screen-reader/) on your pages or components in your [Jest](https://jestjs.io) unit test workflows.\n\nThrough two custom Jest snapshot matchers you can get fast feedback on what you might expect screen readers would output if a user was to traverse the page or component from top to bottom.\n\n\u003e Note: This package should not replace your manual screen reader testing, there is no substitute for testing with real screen readers and with real users.\n\nFor testing more complex scenarios, check out the [`@guidepup/virtual-screen-reader`](https://github.com/guidepup/virtual-screen-reader/) package.\n\nIf you are looking to automate real screen readers, check out the [`@guidepup/guidepup`](https://github.com/guidepup/guidepup) package.\n\n## Capabilities\n\n- **Mirrors Screen Reader Functionality** - assert on what users might expect to hear when using screen readers to traverse a page or component.\n- **UI Framework Agnostic** - want to use React, Vue, Solid, Svelte, etc.? All good here! Works with any UI framework, and plays nicely with the [Testing Library](https://testing-library.com/) suite.\n- **Fast Feedback** - avoid the cumbersome overhead of running an e2e test with a running screen reader by running virtually over the provided DOM.\n\n## Getting Started\n\nInstall the Guidepup Jest matchers package and Virtual Screen Reader to your project:\n\n```bash\n# With NPM\nnpm install -D @guidepup/jest @guidepup/virtual-screen-reader\n\n# With Yarn\nyarn add -D @guidepup/jest @guidepup/virtual-screen-reader\n```\n\nIf you are using TypeScript, make sure to setup Jest correctly by following the [Using TypeScript](https://jestjs.io/docs/getting-started#using-typescript) guide.\n\nAdd a [Jest setup file](https://jestjs.io/docs/configuration#setupfilesafterenv-array) (e.g. `setup-jest.js`) and add the following code to register the screen reader snapshot matchers:\n\n```ts\nimport \"@guidepup/jest\";\n```\n\nAnd get cracking with your first screen reader unit test automation code!\n\n## Usage\n\n```ts\nfunction setupBasicPage() {\n  document.body.innerHTML = `\n  \u003cnav\u003eNav Text\u003c/nav\u003e\n  \u003csection\u003e\n    \u003ch1\u003eSection Heading\u003c/h1\u003e\n    \u003cp\u003eSection Text\u003c/p\u003e\n    \u003carticle\u003e\n      \u003cheader\u003e\n        \u003ch1\u003eArticle Header Heading\u003c/h1\u003e\n        \u003cp\u003eArticle Header Text\u003c/p\u003e\n      \u003c/header\u003e\n      \u003cp\u003eArticle Text\u003c/p\u003e\n    \u003c/article\u003e\n  \u003c/section\u003e\n  \u003cfooter\u003eFooter\u003c/footer\u003e\n  `;\n}\n\ndescribe(\"Screen Reader Tests\", () =\u003e {\n  beforeEach(() =\u003e {\n    setupBasicPage();\n  });\n\n  afterEach(() =\u003e {\n    document.body.innerHTML = ``;\n  });\n\n  test(\"should match the snapshot of expected screen reader spoken phrases\", async () =\u003e {\n    await expect(document.body).toMatchScreenReaderSnapshot();\n  });\n\n  test(\"should match the inline snapshot of expected screen reader spoken phrases\", async () =\u003e {\n    await expect(document.body).toMatchScreenReaderInlineSnapshot(`\n[\n  \"document\",\n  \"navigation\",\n  \"Nav Text\",\n  \"end of navigation\",\n  \"region\",\n  \"heading, Section Heading, level 1\",\n  \"Section Text\",\n  \"article\",\n  \"banner\",\n  \"heading, Article Header Heading, level 1\",\n  \"Article Header Text\",\n  \"end of banner\",\n  \"Article Text\",\n  \"end of article\",\n  \"end of region\",\n  \"contentinfo\",\n  \"Footer\",\n  \"end of contentinfo\",\n  \"end of document\",\n]\n`);\n  });\n});\n```\n\n## Powerful Tooling\n\nCheck out some of the other Guidepup modules:\n\n- [`@guidepup/virtual-screen-reader`](https://github.com/guidepup/virtual-screen-reader/) - reliable unit testing for your screen reader a11y workflows through JavaScript.\n- [`@guidepup/guidepup`](https://github.com/guidepup/guidepup/) - reliable automation for your screen reader a11y workflows through JavaScript supporting VoiceOver and NVDA.\n- [`@guidepup/playwright`](https://github.com/guidepup/guidepup-playwright/) - seamless integration of Guidepup with Playwright.\n\n## Resources\n\n- [Contributing](.github/CONTRIBUTING.md)\n- [Changelog](https://github.com/guidepup/jest/releases)\n- [MIT License](https://github.com/guidepup/jest/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidepup%2Fjest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidepup%2Fjest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidepup%2Fjest/lists"}