{"id":22855054,"url":"https://github.com/deinsoftware/vscode-testing-library-snippets","last_synced_at":"2026-04-08T16:03:49.507Z","repository":{"id":153165248,"uuid":"623285183","full_name":"deinsoftware/vscode-testing-library-snippets","owner":"deinsoftware","description":"VS Code Testing Library snippets for JS and TS","archived":false,"fork":false,"pushed_at":"2023-08-15T06:11:18.000Z","size":1289,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-19T04:40:20.132Z","etag":null,"topics":["hacktoberfest","javascript","node","nodejs","react","reactjs","snippets","snippets-collection","typescript","visual-studio-code","vscode","vscode-extension","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=deinsoftware.testing-library-snippets","language":"JavaScript","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/deinsoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"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},"funding":{"github":["deinsoftware"],"custom":["https://paypal.me/equiman/3"]}},"created_at":"2023-04-04T04:14:24.000Z","updated_at":"2025-12-26T19:13:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"88df1748-351a-48e9-948e-b5802d591a72","html_url":"https://github.com/deinsoftware/vscode-testing-library-snippets","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/deinsoftware/vscode-testing-library-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-testing-library-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-testing-library-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-testing-library-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-testing-library-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deinsoftware","download_url":"https://codeload.github.com/deinsoftware/vscode-testing-library-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-testing-library-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hacktoberfest","javascript","node","nodejs","react","reactjs","snippets","snippets-collection","typescript","visual-studio-code","vscode","vscode-extension","vue","vuejs"],"created_at":"2024-12-13T07:09:43.267Z","updated_at":"2026-04-08T16:03:49.500Z","avatar_url":"https://github.com/deinsoftware.png","language":"JavaScript","funding_links":["https://github.com/sponsors/deinsoftware","https://paypal.me/equiman/3","https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware","https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3"],"categories":[],"sub_categories":[],"readme":"# Testing Library Snippets\n\n[![Version](https://img.shields.io/visual-studio-marketplace/v/deinsoftware.testing-library-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.testing-library-snippets)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/deinsoftware.testing-library-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.testing-library-snippets)\n[![Ratings](https://img.shields.io/visual-studio-marketplace/stars/deinsoftware.testing-library-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.testing-library-snippets)\n[![license](https://img.shields.io/github/license/deinsoftware/vscode-testing-library-snippets)](LICENSE.md)\n[![Open in VS Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://open.vscode.dev/deinsoftware/vscode-testing-library-snippets)\n\n![Testing Library](https://raw.githubusercontent.com/deinsoftware/vscode-testing-library-snippets/main/.github/social/preview.png)\n\nThe quick and easy way to create and use Testing Library with [VS Code](https://code.visualstudio.com/).\n\n\u003e We also **recommend** installing his complement extension [Vitest Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.vitest-snippets)\n\n## Menu\n\n- [Installation](#installation)\n  - [Quick Launch](#quick-launch)\n  - [Extension Manager](#extension-manager)\n  - [Marketplace](#marketplace)\n- [Supported Languages](#supported-languages)\n- [Cheat Sheet](#cheat-sheet)\n- [Snippets](#snippets)\n  - [Import](#import)\n  - [User Event](#user-event)\n  - [Queries](#queries)\n  - [Regex](#regex)\n  - [Wait](#wait)\n- [Keyboard](#keyboard)\n- [Settings](#settings)\n- [About](#about)\n\n---\n\n## Installation\n\n### Quick Launch\n\nOpen the quick launch with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (macOS).\n\nPaste the following command and press `Enter`:\n\n```shell\next install deinsoftware.testing-library-snippets\n```\n\n### Extension Manager\n\nOpen the extension manager with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (macOS), search for `Testing Library Snippets` and click on `[Install]` button.\n\n### Marketplace\n\n[Testing Library Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.testing-library-snippets)\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Supported Languages\n\n| Language         | Extension |\n| ---------------- | --------- |\n| JavaScript       | `.js`     |\n| TypeScript       | `.ts`     |\n| JavaScript React | `.jsx`    |\n| TypeScript React | `.tsx`    |\n| Vue              | `.vue`    |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Cheat Sheet\n\nYou can write queries with any combination of **Search variants** and **Search types**.\n\n### Search variants\n\n| Variants        | Return if no match | Return if 1 match | Return if 1+ match | Await? |\n| --------------- | ------------------ | ----------------- | ------------------ | ------ |\n| `getBy`...      | throw              | return            | throw              | No     |\n| `getAllBy`...   | throw              | array             | array              | No     |\n| `queryBy`...    | `null`             | return            | throw              | No     |\n| `queryAllBy`... | `[]`               | array             | array              | No     |\n| `findBy`...     | throw              | return            | throw              | Yes    |\n| `findAllBy`...  | throw              | array             | array              | Yes    |\n\n### Search types\n\nSorted by oficial recommended [order of priority](https://testing-library.com/docs/queries/about/#priority).\n\n|   | Types                | finds by...                      | DOM example                           |\n| - | -------------------- | -------------------------------- | ------------------------------------- |\n| 1 | ...`Role`            | [ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles)                        | `\u003cdiv role=\"dialog\" /\u003e`               |\n| 2 | ...`LabelText`       | label or aria-label content      | `\u003clabel for=\"element\" /\u003e`             |\n| 3 | ...`PlaceholderText` | input placeholder value          | `\u003cinput placeholder=\"name\" /\u003e`        |\n| 4 | ...`Text`            | element text content             | `\u003cp\u003eLorem ipsum\u003c/p\u003e`                  |\n| 5 | ...`DisplayValue`    | form element current value       | `\u003cinput value=\"Current Value\"\u003e`       |\n| 6 | ...`AltText`         | img alt attribute                | `\u003cimg alt=\"movie poster\" /\u003e`          |\n| 7 | ...`Title`           | title attribute or svg title tag | `\u003cspan title=\"Add\" /\u003e` or `\u003ctitle /\u003e` |\n| 8 | ...`TestId`          | data-testid attribute            | `\u003cdiv data-testid=\"some-message\" /\u003e`  |\n\n\u003e For more information visit the oficial cheat sheet: [DOM](https://testing-library.com/docs/dom-testing-library/cheatsheet) - [React](https://testing-library.com/docs/react-testing-library/cheatsheet) - [Vue](https://testing-library.com/docs/vue-testing-library/cheatsheet)\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Snippets\n\nBelow is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.\n\n### Import\n\n|  Trigger | Result                                                              |\n| :------- | ------------------------------------------------------------------- |\n| `itl→`   | `import { render, screen } from '@testing-library/░\u003creact\\|vue\u003e'█`  |\n| `itr→`   | `import { render, screen } from '@testing-library/react'█`          |\n| `itv→`   | `import { render, screen } from '@testing-library/vue'█`            |\n| `itrh→`  | `import { renderHook } from '@testing-library/react'█`              |\n| `itue→`  | `import userEvent from '@testing-library/user-event'█`              |\n\n### User Event\n\n|  Trigger | Result                                                                      |\n| :------- | --------------------------------------------------------------------------- |\n| `es→`    | `userEvent.setup()█`                                                        |\n| `bees→`  | \u003ccode\u003ebeforeEach(() =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;userEvent.setup()\u003cbr/\u003e})█\u003c/code\u003e   |\n| `ec→`    | `await userEvent.click(░element)█`                                          |\n| `edc→`   | `await userEvent.dblClick(░element)█`                                       |\n| `et→`    | `await userEvent.type(░element, '░text')█`                                  |\n| `ets→`   | ``await userEvent.type(░element, `░text{enter}`)█``                         |\n| `ecl→`   | `await userEvent.clear(░element)█`                                          |\n| `eso→`   | `await userEvent.selectOptions(░element, ['░value/label'])█`                |\n| `edo→`   | `await userEvent.deselectOptions(░element, ['░value/label'])█`              |\n| `etb→`   | `await userEvent.tab()█`                                                    |\n| `eh→`    | `await userEvent.hover(░element)█`                                          |\n| `euh→`   | `await userEvent.unhover(░element)█`                                        |\n| `ep→`    | `await userEvent.paste(░element, '░text')█`                                 |\n\n### Queries\n\nAll the `░variantBy` cursor start with `getBy` by default, but can be easily changed between `\u003cgetBy|getAllBy|queryBy|queryAllBy|findBy|findByAll\u003e` using arrow keys once reach the TAB position.\n\n![Variant Snippets Example](https://raw.githubusercontent.com/deinsoftware/vscode-testing-library-snippets/main/.github/examples/variant-snippets.gif)\n\n#### 1. Role\n\n|  Trigger | Result                                                                                              |\n| :------- | --------------------------------------------------------------------------------------------------- |\n| `qr→`    | `screen.░variantByRole('░id')█`                                                                     |\n| `qro→`   | `screen.░variantByRole('░id', {░})█`                                                                |\n| `qron→`  | `screen.░variantByRole('░id', {name: ░})█`                                                          |\n| `qrc→`   | `screen.░variantByRole('checkbox')█`                                                                |\n| `qrcc→`  | \u003ccode\u003escreen.░variantByRole('checkbox', { checked: ░\u003ctrue\u0026#124;false\u003e} )█\u003c/code\u003e                    |\n| `qrh→`   | `screen.░variantByRole('heading')█`                                                                 |\n| `qrhl→`  | \u003ccode\u003escreen.░variantByRole('heading', { level: ░\u003c1\u0026#124;2\u0026#124;3\u0026#124;4\u0026#124;5\u0026#124;6\u003e} )█\u003c/code\u003e  |\n\n#### 2. LabelText\n\n|  Trigger | Result                                                                          |\n| :------- | ------------------------------------------------------------------------------- |\n| `ql→`    | `screen.░variantByLabelText(░)█`                                                |\n| `qlf→`   | `screen.░variantByLabelText('░Text Match')█`                                    |\n| `qls→`   | `screen.░variantByLabelText('░ext Matc', {exact: false})█`                      |\n| `qlq→`   | `screen.░variantByLabelText('░Text Match', {selector: '░query'})█`              |\n| `qlsq→`  | `screen.░variantByLabelText('░ext matc', {exact: false, selector: '░query'})█`  |\n\n#### 4. Text\n\n|  Trigger | Result                                                                |\n| :------- | --------------------------------------------------------------------- |\n| `qt→`    | `screen.░variantByText(░)█`                                           |\n| `qtf→`   | `screen.░variantByText('░Text Match')█`                               |\n| `qti→`   | `screen.░variantByText('░text match', {ignore: false})█`              |\n| `qts→`   | `screen.░variantByText('░ext Matc', {exact: false})█`                 |\n| `qtsi→`  | `screen.░variantByText('░ext matc', {exact: false, ignore: false})█`  |\n| `qtsw→`  | `screen.░variantByText((content) =\u003e content.startsWith('░Text'))█`    |\n| `qtesw→` | \u003ccode\u003escreen.░variantByText((content, element) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;const tag = element.tagName.toLowerCase() === '░div'\u003cbr/\u003e\u0026nbsp;\u0026nbsp;return tag \u0026\u0026 content.startsWith('░Text')\u003cbr/\u003e})█\u003c/code\u003e   |\n| `qtew→`  | `screen.░variantByText((content) =\u003e content.endsWith('░Match'))█`     |\n| `qteew→` | \u003ccode\u003escreen.░variantByText((content, element) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;const tag = element.tagName.toLowerCase() === '░div'\u003cbr/\u003e\u0026nbsp;\u0026nbsp;return tag \u0026\u0026 content.endsWith('░Match')\u003cbr/\u003e})█\u003c/code\u003e    |\n\n#### 5. PlaceholderText\n\n|  Trigger | Result                                                            |\n| :------- | ----------------------------------------------------------------- |\n| `qp→`    | `screen.░variantByPlaceholderText(░)█`                            |\n| `qpf→`   | `screen.░variantByPlaceholderText('░Text Match')█`                |\n| `qps→`   | `screen.░variantByPlaceholderText('░ext Matc', {exact: false})█`  |\n\n#### 6. DisplayValue\n\n|  Trigger | Result                                                         |\n| :------- | -------------------------------------------------------------- |\n| `qd→`    | `screen.░variantByDisplayValue(░)█`                            |\n| `qdf→`   | `screen.░variantByDisplayValue('░Text Match')█`                |\n| `qds→`   | `screen.░variantByDisplayValue('░ext Matc', {exact: false})█`  |\n\n#### 7. AltText\n\n|  Trigger | Result                                                    |\n| :------- | --------------------------------------------------------- |\n| `qa→`    | `screen.░variantByAltText(░)█`                            |\n| `qaf→`   | `screen.░variantByAltText('░Text Match')█`                |\n| `qas→`   | `screen.░variantByAltText('░ext Matc', {exact: false})█`  |\n\n#### 8. Title\n\n|  Trigger | Result                                                  |\n| :------- | ------------------------------------------------------- |\n| `qtt→`   | `screen.░variantByTitle(░)█`                            |\n| `qttf→`  | `screen.░variantByTitle('░Text Match')█`                |\n| `qtts→`  | `screen.░variantByTitle('░ext Matc', {exact: false})█`  |\n\n#### 9. TestId\n\n|  Trigger | Result                                                   |\n| :------- | -------------------------------------------------------- |\n| `qid→`   | `screen.░variantByTestId(░)█`                            |\n| `qidf→`  | `screen.░variantByTestId('░Text Match')█`                |\n| `qids→`  | `screen.░variantByTestId('░ext Matc', {exact: false})█`  |\n\n### Debug\n\n|  Trigger | Result                               |\n| :------- | ------------------------------------ |\n| `sd→`    | `screen.debug()█`                    |\n| `sltp→`  | `screen.logTestingPlaygroundURL()█`  |\n\n### Regex\n\nIt can be used as a text matcher or `name` property on queries.\n\n| Trigger | Description                 | Result              |\n| :------ | --------------------------- | ------------------- |\n| `rf→`   | full text match             | `/^░Text Match$/█`  |\n| `rfi→`  | full text match ignore case | `/^░text match$/i█` |\n| `rs→`   | substring match             | `/░ext Matc/█`      |\n| `rsi→`  | substring match ignore case | `/░ext matc/i█`     |\n| `rsw→`  | start with                  | `/^░Text/█`         |\n| `rswi→` | start with ignore case      | `/^░text/i█`        |\n| `rew→`  | end with                    | `/░Match$/█`        |\n| `rewi→` | end with ignore case        | `/░match$/i█`       |\n\n### Wait\n\n|  Trigger | Result                                                                          |\n| :------- | ------------------------------------------------------------------------------- |\n| `wf→`    | \u003ccode\u003eawait waitFor(\u003cbr/\u003e\u0026nbsp;\u0026nbsp;() =\u003e ░\u003cbr/\u003e)█\u003c/code\u003e                      |\n| `wfr→`   | \u003ccode\u003eawait waitForElementToBeRemoved(\u003cbr/\u003e\u0026nbsp;\u0026nbsp;() =\u003e ░\u003cbr/\u003e)█\u003c/code\u003e    |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Keyboard\n\nRemember to complement the snippets with these keyboard shortcuts that can be used without needing to move the cursor to the start or to the end.\n\n| Action            | Win/Linux          | macOS             |\n| ----------------- | -----------------: | ----------------: |\n| Insert line above | `ctrl+shift+enter` | `cmd+shift+enter` |\n| Insert line below | `ctrl+enter`       | `cmd+enter`       |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Settings\n\nThe `editor.snippetSuggestions` setting in vscode `settings.json` will show snippets on top of the suggestion list.\n\n```json\n\"editor.snippetSuggestions\": \"top\"\n```\n\n⇧ [Back to menu](#menu)\n\n---\n\n## About\n\n### Fork\n\n- [vscode-jest-snippets](https://github.com/andys8/vscode-jest-snippets) - Jest snippets extension for VS Code\n\n### Built With\n\n- [VS Code](https://code.visualstudio.com/) - Code editing redefined.\n- [Figma](https://www.figma.com/) - The collaborative interface design tool.\n- [SWPM](https://www.npmjs.com/package/swpm) - One Package Manager to command them all.\n\n### Contributing\n\nPlease read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n### Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [Const \u0026 Props Snippets](https://github.com/deinsoftware/vscode-testing-library-snippets/tags) on GitHub.\n\n### Authors\n\n- **Camilo Martinez** [[Equiman](http://github.com/equiman)]\n\nSee also the list of [contributors](https://github.com/deinsoftware/vscode-testing-library-snippets/contributors) who participated in this project.\n\n### Sponsors\n\nIf this project helps you, consider buying me a cup of coffee.\n\n[![GitHub Sponsors](https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware)](https://github.com/sponsors/deinsoftware)\n[![paypal](https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3)](https://paypal.me/equiman/3)\n\n### License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n⇧ [Back to menu](#menu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-testing-library-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeinsoftware%2Fvscode-testing-library-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-testing-library-snippets/lists"}