Component creation, canon hook calling, test creation, log

ReactJS&TS.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  /************
   * New Component
   */
  "filename TSX": {
    "scope": "typescriptreact",
    "prefix": "ftsx",
    "body": [
      "import { FC } from 'react';",
      "",
      "const $TM_FILENAME_BASE: FC = () => {",
      "  return (",
      "    <>",
      "      $TM_FILENAME_BASE",
      "    </>",
      "  );",
      "}",
      "",
      "export default $TM_FILENAME_BASE"
    ],
    "description": "new react typescript component from filename"
  },
  "index TSX": {
    "scope": "typescriptreact",
    "prefix": "tsx",
    "body": [
      "import { FC } from 'react';",
      "",
      "const ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}: FC = () => {",
      "  return (",
      "    <>",
      "      ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}",
      "    </>",
      "  );",
      "}",
      "",
      "export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}"
    ],
    "description": "new react typescript component from folder name"
  },
  // JSX

  "filename JSX": {
    "scope": "javascriptreact",
    "prefix": "fjsx",
    "body": [
      "const $TM_FILENAME_BASE = () => {",
      "  return (",
      "    <>",
      "      $TM_FILENAME_BASE",
      "    </>",
      "  );",
      "}",
      "",
      "export default $TM_FILENAME_BASE"
    ],
    "description": "new react javascript component from filename"
  },
  "index JSX": {
    "scope": "javascriptreact",
    "prefix": "jsx",
    "body": [
      "const ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/} = () => {",
      "  return (",
      "    <>",
      "      ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}",
      "    </>",
      "  );",
      "}",
      "",
      "export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}"
    ],
    "description": "new react javascript component from folder name"
  },

  /************
   * Logs
   */
  "React log": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "rlog",
    "body": ["useEffect(() => {", "  console.log('$0 \\n',$0)", "},[$0]);"],
    "description": "log inside a useEffect"
  },

  /************
   * Hooks
   */
  "useCallback": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "usecallback",
    "body": ["useCallback(() => {", "  $0", "},[]);"],
    "description": "new useCallback hook"
  },
  "useContext": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "usecontext",
    "body": ["useContext($0);"],
    "description": "new useContext hook"
  },
  "useEffect": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "useeffect",
    "body": ["useEffect(() => {", "  $0", "},[]);"],
    "description": "new useEffect hook"
  },
  "useMemo": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "usememo",
    "body": ["useMemo(() => $0, []);"],
    "description": "new useMemo hook"
  },
  "useRef": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "useref",
    "body": ["useRef(null as unknown as $0);"],
    "description": "new useRef hook"
  },
  "useState": {
    "scope": "typescriptreact,javascriptreact",
    "prefix": "usestate",
    "body": ["const [$1,$2] = useState($3);"],
    "description": "new useState hook"
  },

  /************
   * Tests
   */
  "testComponent TSX": {
    "scope": "typescriptreact",
    "prefix": "ttsx",
    "body": [
      "import { cleanup, render, RenderResult } from '@testing-library/react';",
      "import { QuerySelected } from '_types/misc';",
      "import ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/} from '.';",
      "",
      "const expectedChildCount = 1;",
      "",
      "// jest.mock('./Component', () => {",
      "//   return {",
      "//     __esModule: true,",
      "//     default: (props: FTestableComponentProps) => <div data-test-name={props['data-test-name']} />,",
      "//   };",
      "// });",
      "",
      "afterEach(cleanup);",
      "let result: RenderResult;",
      "let ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}: QuerySelected;",
      "describe('${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}', () => {",
      "  beforeEach(() => {",
      "    result = render(<${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/} />);",
      "    ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/} = result.container.querySelector('[data-test-name=\"${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/kebabcase}/}\"]');",
      "  });",
      "",
      "  it('should render the right number of children', () => {",
      "    expect(result.container.childElementCount).toBe(expectedChildCount);",
      "  });",
      "",
      "  describe('${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}', () => {",
      "    it('should render', () => {",
      "      expect(${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}).toBeDefined();",
      "      expect(${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}).not.toBeNull();",
      "    });",
      "  });",
      "});",
      ""
    ],
    "description": "test react typescript component from folder name"
  },
  "testComponent JSX": {
    "scope": "javascriptreact",
    "prefix": "tjsx",
    "body": [
      "import { cleanup, render } from '@testing-library/react';",
      "import ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/} from '.';",
      "",
      "const expectedChildCount = 1;",
      "",
      "// jest.mock('./Component', () => {",
      "//   return {",
      "//     __esModule: true,",
      "//     default: (props) => <div data-test-name={props['data-test-name']} />,",
      "//   };",
      "// });",
      "",
      "afterEach(cleanup);",
      "let result;",
      "let ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/};",
      "describe('${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}', () => {",
      "  beforeEach(() => {",
      "    result = render(<${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/} />);",
      "    ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/} = result.container.querySelector('[data-test-name=\"${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/kebabcase}/}\"]');",
      "  });",
      "",
      "  it('should render the right number of children', () => {",
      "    expect(result.container.childElementCount).toBe(expectedChildCount);",
      "  });",
      "",
      "  describe('${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}', () => {",
      "    it('should render', () => {",
      "      expect(${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}).toBeDefined();",
      "      expect(${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}).not.toBeNull();",
      "    });",
      "  });",
      "});",
      ""
    ],
    "description": "test react javascript component from folder name"
  }
}

Custom Types

type QuerySelected = Element | null | undefined;

interface FTestableComponentProps {
  'data-test-name'?: string;
}