### 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.