typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "New React test": {
    "prefix": "rtnew",
    "body": [
      "import { render, screen } from '@testing-library/react'",
      "import $1 from $2",
      "",
      "test('Sanity test', () => {",
      "  expect(true).toBe(true)",
      "})",
      ""
    ],
    "description": "New Vue test"
  },
  "React component is well defined": {
    "prefix": "rtWellDefined",
    "body": [
      "test('Component is well defined so $1 should be rendered.', () => {",
      "  render(<$2 />);",
      "  const $3 = screen.getByTestId('$1');",
      "  expect($3).toBeInTheDocument();",
      "})",
      ""
    ],
    "description": "React component is well defined"
  },
  "Change event was triggered on input or textarea element": {
    "prefix": "rtChangeTriggered",
    "body": [
      "test('Change events was tregged width a value of $1 so $2 should have a value of $1', () => {",
      "  const inputValue = $1",
      "  render(<Component />);",
      "  const $3 = screen.getByTestId('$2');",
      "  fireEvent.change($3, { target: { value: inputValue } });",
      "  expect($3).toHaveValue(inputValue);",
      "})",
      ""
    ],
    "description": "Change event was triggered on input or textarea element"
  },
  "Callback should be called": {
    "prefix": "rtPropCallback",
    "body": [
      "test('Prop $1 was set using a callback function so when $2 the callback should to be called', () => {",
      " const myFunction = jest.fn()",
      " render(<Component $1={myFunction}/>);",
      " const $3 = screen.getByTestId('$3');",
      " expect(myFunction).toBeCalled();",
      "});"
    ],
    "description": "Callback should be called"
  },
  "match whole text": {
    "prefix": "rtMatchText",
    "body": ["expect(settlementsTitle).toHaveTextContent(/^sarasa$/);"],
    "description": "Text should be"
  },
  "Prop was set to": {
    "prefix": "rtPropWasSet",
    "body": [
      "test('Prop $1 was set to $2', () => {",
      "  render(<$3 $1={$2} />);",
      "});"
    ],
    "description": "React prop was set to"
  },
  "React Test Get Element By Test ID": {
    "prefix": "rtGetByTestID",
    "body": ["const $1 = screen.getByTestId(\"$1\");"],
    "description": "React Test Get Element By Test ID"
  },
  "React Test contain HTML": {
    "prefix": "rtToContainHTML",
    "body": [
      "expect(mainContentTestId).toContainHTML(\"<main>The main content</main>\");"
    ],
    "description": "The element contain certain value html"
  },
  "React Test element in not on document": {
    "prefix": "rtElementIsNotOnDocument",
    "body": [
      "const $1TestId = screen.queryByTestId($2);",
      "expect($1TestId).toBeNull();"
    ],
    "description": "The element contain certain value html"
  }
}