{"id":13895866,"url":"https://github.com/mlaursen/vim-react-snippets","last_synced_at":"2025-04-07T10:25:06.846Z","repository":{"id":3698750,"uuid":"36568406","full_name":"mlaursen/vim-react-snippets","owner":"mlaursen","description":"Useful snippets for developing in React (Javascript and Typescript)","archived":false,"fork":false,"pushed_at":"2024-07-30T20:25:21.000Z","size":497,"stargazers_count":242,"open_issues_count":1,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-29T15:34:19.069Z","etag":null,"topics":["javascript","proptypes","react","snippets","typescript"],"latest_commit_sha":null,"homepage":"","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlaursen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2015-05-30T17:36:41.000Z","updated_at":"2024-10-25T19:10:07.000Z","dependencies_parsed_at":"2023-07-06T01:55:27.023Z","dependency_job_id":"cf398acb-1b34-4e3e-a60e-689c1e538ce2","html_url":"https://github.com/mlaursen/vim-react-snippets","commit_stats":{"total_commits":252,"total_committers":5,"mean_commits":50.4,"dds":0.03968253968253965,"last_synced_commit":"755e288bd0db1052be4195fcc82a25e28b609e0b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Fvim-react-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Fvim-react-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Fvim-react-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Fvim-react-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlaursen","download_url":"https://codeload.github.com/mlaursen/vim-react-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289409,"owners_count":20914464,"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":["javascript","proptypes","react","snippets","typescript"],"created_at":"2024-08-06T18:02:32.197Z","updated_at":"2025-04-07T10:25:06.837Z","avatar_url":"https://github.com/mlaursen.png","language":"Lua","readme":"# vim-react-snippets\n\nA collection of common Javascript and Typescript vim snippets for developing\n[React] applications. The snippets within this repo rely on [LuaSnip] or\n[UltiSnips] as the snippet provider.\n\n## Typescript Example\n\nhttps://user-images.githubusercontent.com/3920850/167317421-45035822-9ced-40ec-8d85-9b3db5d42651.mov\n\n## Previewing Snippets with [coc-snippets](https://github.com/neoclide/coc-snippets)\n\nhttps://user-images.githubusercontent.com/3920850/167317372-6165c118-99da-4a31-88e6-57b6c7086ed5.mov\n\n## Using Log Helpers\n\nhttps://user-images.githubusercontent.com/3920850/167317795-63e74576-f0e6-4787-817f-b699e88d10e7.mov\n\n## Writing Tests\n\nhttps://user-images.githubusercontent.com/3920850/167318157-70692488-b126-47b2-9eab-ee3dc79771e9.mov\n\n## Installation\n\nWith [lazy.nvim] and [LuaSnip]:\n\n```diff\n  {\n    \"hrsh7th/nvim-cmp\",\n    dependencies = {\n      \"L3MON4D3/LuaSnip\",\n      \"saadparwaiz1/cmp_luasnip\",\n+     \"mlaursen/vim-react-snippets\",\n    },\n    ---@param opts cmp.ConfigSchema\n    opts = function()\n      vim.api.nvim_set_hl(0, \"CmpGhostText\", { link = \"Comment\", default = true })\n+     require(\"vim-react-snippets\").lazy_load()\n+\n+     -- if you do not want to wrap all props in `Readonly\u003cT\u003e`\n+     local config = require(\"vim-react-snippets.config\")\n+     config.readonly_props = false\n      local cmp = require(\"cmp\")\n      local luasnip = require(\"luasnip\")\n      local compare = cmp.config.compare\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    With \u003ca href=\"https://github.com/junegunn/vim-plug\"\u003evim-plug\u003c/a\u003e and\n    \u003ca href=\"https://github.com/SirVer/ultisnips\"\u003eUltiSnips\u003c/a\u003e:\n  \u003c/summary\u003e\n\n```vim\ncall plug#begin('~/.vim/plugged')\nPlug 'SirVer/ultisnips'\nPlug 'mlaursen/vim-react-snippets'\ncall plug#end()\n```\n\n\u003c/details\u003e\n\n\u003e NOTE: I no longer use UltiSnips so the snippets might be different. Check out\n\u003e the [UltiSnips folder] to see available snippets.\n\n## Cheatsheet\n\nMost of the available snippets will be listed below to showcase the generated\ncode. Tabstops will be indicated with `$TABSTOP` or `$NAME` where `$NAME` is\nreplaceable. `$CFN` or `$CFN_` will indicate a snippet that uses the current\nfile name to generate the code.\n\nSome snippets support an \"inline\" version as where the `const whatever = ` will\nbe omitted. These snippets will be marked with ✨.\n\n\u003e Javascript snippets are not shown since I really only use Typescript now, but\n\u003e they are generally the same without the type definitions included.\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Function Components](#function-components)\n  - [Function Component Export](#function-component-export)\n  - [Function Component Default Export](#function-component-default-export)\n  - [Simple Function Component Export](#simple-function-component-export)\n  - [Simple Function Component Default Export](#simple-function-component-default-export)\n  - [Forwarded Function Component Export](#forwarded-function-component-export)\n  - [Forwarded Function Component Default Export](#forwarded-function-component-default-export)\n- [Server Components](#server-components)\n  - [Server Component Export](#server-component-export)\n  - [Server Component Default Export](#server-component-default-export)\n  - [Simple Server Component Export](#simple-server-component-export)\n  - [Simple Server Component Default Export](#simple-server-component-default-export)\n- [Hooks and Effects](#hooks-and-effects)\n  - [useState](#usestate)\n  - [useReducer](#usereducer)\n  - [useEffect](#useeffect)\n  - [useContext ✨](#usecontext-)\n  - [useCallback ✨](#usecallback-)\n  - [useMemo ✨](#usememo-)\n  - [useMemo return (manual return required) ✨](#usememo-return-manual-return-required-)\n  - [useRef ✨](#useref-)\n  - [Create Context Provider](#create-context-provider)\n- [Redux](#redux)\n  - [useAppDispatch ✨](#useappdispatch-)\n  - [useSelector ✨](#useselector-)\n  - [useAppSelector ✨](#useappselector-)\n- [Common](#common)\n  - [Destructured Const](#destructured-const)\n  - [Export Destructured Const](#export-destructured-const)\n  - [if](#if)\n  - [else](#else)\n  - [switch](#switch)\n  - [for loop](#for-loop)\n  - [reduce](#reduce)\n  - [noop](#noop)\n  - [interface](#interface)\n- [JSDoc/TSDoc](#jsdoctsdoc)\n  - [Block Comment](#block-comment)\n  - [@example](#example)\n  - [@defaultValue](#defaultvalue)\n  - [@since](#since)\n- [Logging](#logging)\n- [Importing](#importing)\n- [Exporting](#exporting)\n- [NODE_ENV](#node_env)\n- [Tests](#tests)\n  - [Describe a test](#describe-a-test)\n  - [it should...](#it-should)\n  - [it should (async)...](#it-should-async)\n  - [Test Expect](#test-expect)\n  - [Test Queries ✨](#test-queries-)\n- [React Testing](#react-testing)\n  - [React Test File](#react-test-file)\n  - [React Test File (ESM)](#react-test-file-esm)\n  - [Global Test File](#global-test-file)\n  - [Global Test File (ESM)](#global-test-file-esm)\n  - [User Event Test](#user-event-test)\n  - [waitFor](#waitfor)\n\n* [SCSS Snippets](#scss-snippets)\n* [Contributing](#contributing)\n  - [LuaSnip Template](#luasnip-template)\n\n\u003c!-- tocstop --\u003e\n\n### Function Components\n\n#### Function Component Export\n\n`fce` -\u003e\n\n```tsx\nimport { type ReactElement, type ReactNode } from \"react\"\n\nexport interface $CFN_Props {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport function $CFN(props: Readonly\u003c$CFN_Props\u003e): ReactElement {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Function Component Default Export\n\n`fcde` -\u003e\n\n```tsx\nimport { type ReactElement, type ReactNode } from \"react\"\n\nexport interface $CFN_Props {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport default function $CFN(props: Readonly\u003c$CFN_Props\u003e): ReactElement {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Simple Function Component Export\n\n`sfce` -\u003e\n\n```tsx\nimport { type ReactElement } from \"react\"\n\nexport function $CFN(): ReactElement {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Simple Function Component Default Export\n\n`sfcde` -\u003e\n\n```tsx\nimport { type ReactElement } from \"react\"\n\nexport default function $CFN(): ReactElement {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Forwarded Function Component Export\n\n`ffce` -\u003e\n\n```tsx\nimport { forwardRef, type ReactNode } from \"react\"\n\nexport interface $CFNProps {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport const $CFN = forwardRef\u003cHTML$TABSTOPElement, Readonly\u003c$CFN_Props\u003e\u003e(\n  function $CFN(props, ref) {\n    return \u003cdiv ref={ref}\u003e\u003c/div\u003e\n  }\n)\n```\n\n#### Forwarded Function Component Default Export\n\n`ffcde` -\u003e\n\n```tsx\nimport { forwardRef, type ReactNode } from \"react\"\n\nexport interface $CFNProps {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport default forwardRef\u003cHTML$TABSTOPElement, Readonly\u003c$CFN_Props\u003e\u003e(\n  function $CFN(props, ref) {\n    return \u003cdiv ref={ref}\u003e\u003c/div\u003e\n  }\n)\n```\n\n### Server Components\n\n#### Server Component Export\n\n`sce` -\u003e\n\n```tsx\nimport { type ReactElement, type ReactNode } from \"react\"\n\nexport interface $CFN_Props {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport function $CFN(props: Readonly\u003c$CFN_Props\u003e): Promise\u003cReactElement\u003e {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Server Component Default Export\n\n`scde` -\u003e\n\n```tsx\nimport { type ReactElement, type ReactNode } from \"react\"\n\nexport interface $CFN_Props {\n  $TABSTOP\n  children: ReactNode\n}\n\nexport default function $CFN(\n  props: Readonly\u003c$CFN_Props\u003e\n): Promise\u003cReactElement\u003e {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Simple Server Component Export\n\n`sfce` -\u003e\n\n```tsx\nimport { type ReactElement } from \"react\"\n\nexport function $CFN(): Promise\u003cReactElement\u003e {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n#### Simple Server Component Default Export\n\n`sscde` -\u003e\n\n```tsx\nimport { type ReactElement } from \"react\"\n\nexport default function $CFN(): Promise\u003cReactElement\u003e {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n\n### Hooks and Effects\n\n#### useState\n\n`useS` -\u003e\n\n```ts\nconst [$STATE, set$STATE] = useState$TABSTOP($TABSTOP)\n```\n\n#### useReducer\n\n`useRed` -\u003e\n\n```tsx\nconst [$STATE, $DISPATCH] = useReducer(function reducer(state: $STATE, action: $ACTION): $STATE {\n  switch (action.type):\n    default:\n      return state\n}, $INITIAL_STATE)\n```\n\n#### useEffect\n\n`useE` -\u003e\n\n```ts\nuseEffect(() =\u003e {\n  $TABSTOP\n}, [])\n```\n\n#### useContext ✨\n\n`useC` -\u003e\n\n```ts\nconst context = useContext($TABSTOP)\n```\n\n#### useCallback ✨\n\n`useCB` -\u003e\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nconst $CALLBACK = useCallback(($TABSTOP) =\u003e {\n  $TABSTOP\n}, [])\n```\n\n#### useMemo ✨\n\n`useM` -\u003e\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nconst $MEMOIZED = useMemo(() =\u003e ({\n  $TABSTOP\n}), [])\n```\n\n#### useMemo return (manual return required) ✨\n\n`useMR` -\u003e\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nconst $MEMOIZED = useMemo(() =\u003e {\n  $TABSTOP\n}, [])\n```\n\n#### useRef ✨\n\n`useR` -\u003e\n\n```ts\nconst $REF = useRef$TABSTOP(TABSTOP)\n```\n\n#### Create Context Provider\n\n`ccp` -\u003e\n\n```tsx\nimport { createContext, useContext } from \"react\"\n\nexport interface $CFN_Context {}\n\nconst context = createContext\u003c$CFN_Context | null\u003e(null)\nconst { Provider } = context\n\nexport function use$CFN_Context(): $CFN_Context {\n  const value = useContext(context)\n  if (!value) {\n    throw new Error(\"$CFN_Context must be initialized.\")\n  }\n\n  return value\n}\n```\n\n### Redux\n\n#### useAppDispatch ✨\n\n`useD` -\u003e\n\n```ts\nconst dispatch = useAppDispatch()\n```\n\n#### useSelector ✨\n\n`useSL` -\u003e\n\n```ts\nconst $VALUE = useSelector(($STATE: AppState) =\u003e $SELECTOR)\n```\n\n#### useAppSelector ✨\n\n`useAS` -\u003e\n\n```ts\nconst $VALUE = useAppSelector(($STATE) =\u003e $SELECTOR)\n```\n\n### Common\n\n#### Destructured Const\n\n`dc` -\u003e\n\n```ts\nconst { $TABSTOP } = $PROPS\n```\n\n```ts\ndcuseSomeHook()\n ^ trigger completion here\n\nconst { $TABSTOP } = useSomeHook()\n```\n\n#### Export Destructured Const\n\n`edc` -\u003e\n\n```ts\nconst { $TABSTOP } = $PROPS\n```\n\n#### if\n\n`if` -\u003e\n\n```ts\nif ($CONDITION) {\n  $TABSTOP\n}\n```\n\n#### else\n\n`else` -\u003e\n\n```ts\nelse $TABSTOP{\n  $TABSTOP\n}\n```\n\nThe `if` snippet can be triggered from the first tabstop to generate:\n\n```ts\nelse if{\n  $TABSTOP\n}\n```\n\ninto:\n\n```ts\nelse if ($CONDITION) {\n  $TABSTOP\n}\n```\n\n#### switch\n\n`switch` -\u003e\n\n```ts\nswitch ($KEY) {\n  case $VALUE:\n    $TABSTOP\n    break\n  default:\n    $TABSTOP\n}\n```\n\n#### for loop\n\n`for` -\u003e\n\n```ts\nfor (let $I = $0, $I \u003c $LIST.length; $I++) {\n  const $ITEM = $LIST[$I]\n  $TABSTOP\n}\n```\n\n#### reduce\n\n`reduce` -\u003e\n\n```ts\nconst $VALUE = $LIST.reduce\u003c$TYPE_DEF\u003e(($result, $item) =\u003e {\n  $TABSTOP\n  return $RESULT\n}, $INITIAL)\n```\n\n#### noop\n\n`noop` -\u003e\n\n```ts\nconst noop = (): void =\u003e {\n  // do nothing\n}\n```\n\n#### interface\n\n`intf` -\u003e\n\n```ts\nexport interface $CFN_$TABSTOP {\n  $TABSTOP\n}\n```\n\n### JSDoc/TSDoc\n\n#### Block Comment\n\n`/**` -\u003e\n\n```ts\n/**\n * $TABSTOP\n */\n```\n\n#### @example\n\n`@e` -\u003e\n\n```ts\n@example $EXAMPLE_NAME\n\\`\\`\\`$TSX\n$TABSTOP\n\\`\\`\\`\n```\n\n#### @defaultValue\n\n`@d` -\u003e\n\n```ts\n@defaultValue \\`$TABSTOP\\`\n```\n\n#### @since\n\n`@s` -\u003e\n\n```ts\n@since $MAJOR.$MINOR.$PATCH\n```\n\n### Logging\n\n| Shortcut | Nane                   | Expands to                              |\n| -------- | ---------------------- | --------------------------------------- |\n| `cl`     | Console Log            | `console.log($TABSTOP)`                 |\n| `clv`    | Console Log Variable   | `console.log(\"$TABSTOP: \", $TABSTOP)`   |\n| `ce`     | Console Error          | `console.error($TABSTOP)`               |\n| `cev`    | Console Error Variable | `console.error(\"$TABSTOP: \", $TABSTOP)` |\n| `cw`     | Console Warn           | `console.warn($TABSTOP)`                |\n| `cwv`    | Console Warn Variable  | `console.warn(\"$TABSTOP: \", $TABSTOP)`  |\n| `ct`     | Console Table          | `console.table($TABSTOP)`               |\n| `cd`     | Console Debug          | `console.debug($TABSTOP)`               |\n| `cdv`    | Console Debug Variable | `console.debug(\"$TABSTOP: \", $TABSTOP)` |\n\n\u003e Note: The logging commands that end in a `v` will have the cursor at the\n\u003e second `$TABSTOP` instead of the first so that autocompletion will work.\n\n### Importing\n\n| Shortcut | Name                 | Expands to                                       |\n| -------- | -------------------- | ------------------------------------------------ |\n| `imp`    | Import               | `import packageName from \"package-name\"`         |\n| `impf`   | Import File          | `import File from \"./File\"`                      |\n| `impd`   | Import Destructured  | `import { destructured } from \"package-or/path\"` |\n| `impp`   | Import (Please?)     | `import \"./file\"`                                |\n| `icn`    | Import Classnames    | `import cn from \"classnames\"`                    |\n| `icnb`   | Import Cnbuilder     | `import { cnb } from \"cnbuilder\"`                |\n| `ism`    | Import Styles Module | `import styles from \"./$CFN.module.scss\"`        |\n\n### Exporting\n\n| Shortcut | Name                | Expands to                              |\n| -------- | ------------------- | --------------------------------------- |\n| `exp`    | Export              | `export { default } from \"./$CFN\"`      |\n| `expf`   | Export File         | `export $TABSTOP from \"./$TABSTOP\"`     |\n| `expd`   | Export Destructured | `export { $TABSTOP } from \"./$TABSTOP\"` |\n| `expa`   | Export All          | `export * from \"$TABSTOP\"`              |\n\n### NODE_ENV\n\n| Shortcut | Expands to                              |\n| -------- | --------------------------------------- |\n| `dev`    | `process.env.NODE_ENV !== \"production\"` |\n| `prod`   | `process.env.NODE_ENV === \"production\"` |\n\n### Tests\n\n#### Describe a test\n\n`desc` -\u003e\n\n```ts\ndescribe('$CFN', () =\u003e {\n  it('should $TABSTOP', () =\u003e {\n    $TABSTOP\n  )}\n})\n```\n\n#### it should...\n\n`it` -\u003e\n\n```ts\nit(\"should $TABSTOP\", () =\u003e {\n  $TABSTOP\n})\n```\n\n#### it should (async)...\n\n`ita` -\u003e\n\n```ts\nit(\"should $TABSTOP\", async () =\u003e {\n  $TABSTOP\n})\n```\n\n#### Test Expect\n\n| Shortcut | Name                | Expands to                                         |\n| -------- | ------------------- | -------------------------------------------------- |\n| `es`     | Expect Snapshot     | `expect(${container}).toMatchSnapshot()`           |\n| `ett`    | Expect To Throw     | `expect(() =\u003e $TABSTOP).toThrow()`                 |\n| `entt`   | Expect Not To Throw | `expect(() =\u003e $TABSTOP).not.toThrow()`             |\n| `enc`    | Expect Not Called   | `expect($TABSTOP).not.toHaveBeenCalled()`          |\n| `ecw`    | Expect Called With  | `expect($TABSTOP).toHaveBeenCalledWith($TABSTOP)`  |\n| `ect`    | Expect Called Times | `expect($TABSTOP).toHaveBeenCalledTimes($TABSTOP)` |\n\n#### Test Queries ✨\n\n| Shortcut | Name                          | Expands to                                                                    |\n| -------- | ----------------------------- | ----------------------------------------------------------------------------- |\n| `sgbr`   | Screen Get By Role            | `const $TABSTOP = screen.getByRole(\"${button}\", { name: \"$TABSTOP\" })`        |\n| `sgbru`  | Screen Get By Role (Unnamed)  | `const $TABSTOP = screen.getByRole(\"${progressbar}\")`                         |\n| `sgbi`   | Screen Get By testId          | `const $TABSTOP = screen.getByTestId(\"$TABSTOP\")`                             |\n| `sgbt`   | Screen Get By Text            | `const $TABSTOP = screen.getByText(\"$TABSTOP\")`                               |\n| `sfbr`   | Screen Find By Role           | `const $TABSTOP = await screen.findByRole(\"${button}\", { name: \"$TABSTOP\" })` |\n| `sfbru`  | Screen Find By Role (Unnamed) | `const $TABSTOP = await screen.findByRole(\"${progressbar}\")`                  |\n| `fbi`    | Screen Find By testId         | `const $TABSTOP = await screen.findByTestId(\"$TABSTOP\")`                      |\n| `fbt`    | Screen Find By Text           | `const $TABSTOP = await screen.findByText(\"$TABSTOP\")`                        |\n| `gbr`    | Get By Role                   | `const $TABSTOP = getByRole(\"${button}\", { name: \"$TABSTOP\" })`               |\n| `gbru`   | Get By Role (Unnamed)         | `const $TABSTOP = getByRole(\"${progressbar}\")`                                |\n| `gbi`    | Get By testId                 | `const $TABSTOP = getByTestId(\"$TABSTOP\")`                                    |\n| `gbt`    | Get By Text                   | `const $TABSTOP = getByText(\"$TABSTOP\")`                                      |\n| `fbr`    | Find By Role                  | `const $TABSTOP = await findByRole(\"${button}\", { name: \"$TABSTOP\" })`        |\n| `fbru`   | Find By Role (Unnamed)        | `const $TABSTOP = await findByRole(\"${progressbar}\")`                         |\n| `fbi`    | Find By testId                | `const $TABSTOP = await findByTestId(\"$TABSTOP\")`                             |\n| `fbt`    | Find By Text                  | `const $TABSTOP = await findByText(\"$TABSTOP\")`                               |\n\n### React Testing\n\n#### React Test File\n\n`rtf` -\u003e\n\n```tsx\nimport { render, screen, userEvent } from \"${@testing-library/react}\"\n\nimport { $CFN } from \"../$CFN\"\n\ndescribe(\"$CFN\", () =\u003e {\n  it(\"should $TABSTOP\", () =\u003e {\n    $TABSTOP\n  })\n})\n```\n\n#### React Test File (ESM)\n\n`rtfe` -\u003e\n\n```tsx\nimport { render, screen, userEvent } from \"${@testing-library/react}\"\n\nimport { $CFN } from \"../$CFN.js\"\n\ndescribe(\"$CFN\", () =\u003e {\n  it(\"should $TABSTOP\", () =\u003e {\n    $TABSTOP\n  })\n})\n```\n\n#### Global Test File\n\n`gtf` -\u003e\n\n```tsx\nimport { describe, expect, it } from \"${@jest/globals}\"\nimport { render, screen, userEvent } from \"${@testing-library/react}\"\n\nimport { $CFN } from \"../$CFN\"\n\ndescribe(\"$CFN\", () =\u003e {\n  it(\"should $TABSTOP\", () =\u003e {\n    $TABSTOP\n  })\n})\n```\n\n#### Global Test File (ESM)\n\n`gtfe` -\u003e\n\n```tsx\nimport { describe, expect, it } from \"${@jest/globals}\"\nimport { render, screen, userEvent } from \"${@testing-library/react}\"\n\nimport { $CFN } from \"../$CFN.js\"\n\ndescribe(\"$CFN\", () =\u003e {\n  it(\"should $TABSTOP\", () =\u003e {\n    $TABSTOP\n  })\n})\n```\n\n#### User Event Test\n\n`uet` -\u003e\n\n```tsx\nit(\"should $TABSTOP\", async () =\u003e {\n  const user = userEvent.setup()\n  $TABSTOP\n\n  expect(true).toBe(true)\n})\n```\n\n#### waitFor\n\n`wf` -\u003e\n\n```tsx\nawait waitFor(() =\u003e {\n  $TABSTOP\n})\n```\n\n## SCSS Snippets\n\n| Shortcut | Name                 | Expands to                                          |\n| -------- | -------------------- | --------------------------------------------------- |\n| `use`    | Use                  | `@use \"$TABSTOP\";`                                  |\n| `use*`   | Use \\*               | `@use \"$TABSTOP\" as *;`                             |\n| `for`    | Forward              | `@forward \"$TABSTOP\" with ($TABSTOP);`              |\n| `pcs`    | Prefers Color Scheme | `@media (prefers-color-scheme: $DARK) { $TABSTOP }` |\n\n## Contributing\n\n### LuaSnip Template\n\n```lua\nlocal ls = require(\"luasnip\")\nlocal s = ls.snippet\nlocal sn = ls.snippet_node\nlocal isn = ls.indent_snippet_node\nlocal t = ls.text_node\nlocal i = ls.insert_node\nlocal f = ls.function_node\nlocal c = ls.choice_node\nlocal d = ls.dynamic_node\nlocal r = ls.restore_node\nlocal events = require(\"luasnip.util.events\")\nlocal ai = require(\"luasnip.nodes.absolute_indexer\")\nlocal extras = require(\"luasnip.extras\")\nlocal l = extras.lambda\nlocal rep = extras.rep\nlocal p = extras.partial\nlocal m = extras.match\nlocal n = extras.nonempty\nlocal dl = extras.dynamic_lambda\nlocal fmt = require(\"luasnip.extras.fmt\").fmt\nlocal fmta = require(\"luasnip.extras.fmt\").fmta\nlocal conds = require(\"luasnip.extras.expand_conditions\")\nlocal postfix = require(\"luasnip.extras.postfix\").postfix\nlocal types = require(\"luasnip.util.types\")\nlocal parse = require(\"luasnip.util.parser\").parse_snippet\nlocal ms = ls.multi_snippet\nlocal k = require(\"luasnip.nodes.key_indexer\").new_key\n```\n\n[react]: https://reactjs.org/\n[ultisnips]: https://github.com/SirVer/ultisnips\n[ultisnips folder]: https://github.com/mlaursen/vim-react-snippets/tree/main/UltiSnips\n[luasnip]: https://github.com/L3MON4D3/LuaSnip\n[lazy.nvim]: https://github.com/folke/lazy.nvim\n","funding_links":[],"categories":["Lua"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlaursen%2Fvim-react-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlaursen%2Fvim-react-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlaursen%2Fvim-react-snippets/lists"}