Vscode snippets

selector.code-snippets.json

{
  "typeScriptReactFunctionalComponent": {
    "prefix": "newComponent",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "const ${1:${TM_FILENAME_BASE}}: FC = () => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}",
      ""
    ],
    "description": "Functional Component"
  },
  "typeScriptReactFunctionalComponentProps": {
    "prefix": "newComponentProps",
    "body": [
      "import React from 'react'",
      "",
      "interface I${1:${TM_FILENAME_BASE}}Props {",
      "\t",
      "}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = (props: I${1:${TM_FILENAME_BASE}}Props) => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}",
      ""
    ],
    "description": "Functional Component with props + TS interface"
  },
  "addTSInterfaceAndProps": {
    "prefix": "addProps",
    "body": [
      "",
      "interface I${1:${TM_FILENAME_BASE}}Props {",
      "\t",
      "}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = (props: I${1:${TM_FILENAME_BASE}}Props) => {"
    ],
    "description": "Adds props + TS interface"
  },
  "unitTest": {
    "prefix": "testComponent",
    "body": [
      "import React from 'react'",
      "import { screen, fireEvent, waitFor, cleanup, render } from '@testing-library/react'",
      "import userEvent from '@testing-library/user-event'",
      "import ${1:${TM_FILENAME_BASE}} from './${1:${TM_FILENAME_BASE}}'",
      "",
      "// See https://testing-library.com/docs/react-testing-library/cheatsheet",
      "describe('<${1:${TM_FILENAME_BASE}} />', () => {",
      "",
      "\tbeforeEach(() => {",
      "\t\trender(<${1:${TM_FILENAME_BASE}} />)",
      "\t})",
      "",
      "\tafterEach(cleanup)",
      "",
      "\tit('$0', async () => {",
      "\t\tfireEvent.change(screen.getByTestId('data-test'), { target: { value: 'VALUE' } }) ",
      "\t\tuserEvent.type(screen.getByTestId('data-test'), '{enter}')",
      "\t\tawait waitFor(() => expect(screen.getByText(/text/i)).toBeTruthy())",
      "\t})",
      "",
      "})",
      "",
      "// npx jest ${TM_FILEPATH} --watch",
      ""
    ],
    "description": "Test: Component spec"
  },
  "unitUtilTest": {
    "prefix": "testUtil",
    "body": [
      "import { ${1:${TM_FILENAME_BASE}} } from './${1:${TM_FILENAME_BASE}}'",
      "",
      "describe('${1:${TM_FILENAME_BASE}}', () => {",
      "\tit('$0', () => {",
      "\t\tconst valueCheck = ${1:${TM_FILENAME_BASE}}()",
      "\t\texpect(valueCheck).toBeTruthy()",
      "\t})",
      "})",
      "",
      "// npx jest ${TM_FILEPATH} --watch",
      ""
    ],
    "description": "Test: Util spec"
  }
}