### Install Guidepup Jest Matchers Source: https://github.com/guidepup/jest/blob/main/README.md Install the @guidepup/jest and @guidepup/virtual-screen-reader packages as development dependencies using npm or yarn. ```bash # With NPM npm install -D @guidepup/jest @guidepup/virtual-screen-reader # With Yarn yarn add -D @guidepup/jest @guidepup/virtual-screen-reader ``` -------------------------------- ### Run TypeScript NodeNext Example with Jest Matchers (Bash) Source: https://github.com/guidepup/jest/blob/main/examples/typescript-nodenext/README.md Provides the necessary bash commands to set up and execute the example project. It involves installing dependencies for the core package and then navigating to the example directory to install its dependencies and run the tests. ```Bash # Install and build core package yarn install --frozen-lockfile # Navigate to example, install, and test cd examples/typescript-nodenext yarn install --frozen-lockfile yarn test ``` -------------------------------- ### Test with Guidepup Jest Matchers Source: https://github.com/guidepup/jest/blob/main/README.md Example Jest test suite demonstrating how to set up a basic DOM structure, use `toMatchScreenReaderSnapshot` and `toMatchScreenReaderInlineSnapshot` to assert on the virtual screen reader output, and clean up the DOM. ```ts function setupBasicPage() { document.body.innerHTML = `

Section Heading

Section Text

Article Header Heading

Article Header Text

Article Text

`; } describe("Screen Reader Tests", () => { beforeEach(() => { setupBasicPage(); }); afterEach(() => { document.body.innerHTML = ``; }); test("should match the snapshot of expected screen reader spoken phrases", async () => { await expect(document.body).toMatchScreenReaderSnapshot(); }); test("should match the inline snapshot of expected screen reader spoken phrases", async () => { await expect(document.body).toMatchScreenReaderInlineSnapshot(` [ "document", "navigation", "Nav Text", "end of navigation", "region", "heading, Section Heading, level 1", "Section Text", "article", "banner", "heading, Article Header Heading, level 1", "Article Header Text", "end of banner", "Article Text", "end of article", "end of region", "contentinfo", "Footer", "end of contentinfo", "end of document", ] `); }); }) ``` -------------------------------- ### Register Guidepup Jest Matchers Source: https://github.com/guidepup/jest/blob/main/README.md Add this import statement to your Jest setup file (e.g., `setupFilesAfterEnv`) to register the custom screen reader snapshot matchers. ```ts import "@guidepup/jest"; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.