Snippets

List of snippets

Basic Snippets

Trigger	Description
prop-import	import prop-types
prop-types	Define prop-types
cx-import	import classNames
exp	export default
comment-block	comment block

Hooks

Trigger	Description
useStateSnippet	Snippet for useState hook
useRefSnippet	Snippet for useRef hook
useEffectSnippet	Snippet for useEffect hook
useCallbackSnippet	Snippet for useCallback hook

React

Trigger	Description
cc or const or create-component	Create component skeleton

React Native

Trigger	Description
cc or cre or create-component	Create component skeleton in react native

Jest

Trigger	Description
cct or cctest or create-test-component	Create test case file skeleton
ccmt or ccmtest or create-middleware-test	Create file skeleton for middleware test file
mockDispatch	Create jest mock for useDispatch()
mockTranslation	Create jest mockTranslation
mnc or mock-named-component	Create jest mock for named component
muc or mock-unnamed-component	Create jest mock for unnamed component
thbcwo	expect().toHaveBeenCalledWith(expect.objectedContaining({}))

Console

Trigger	Description
clg-assert	console.assert()
clg-clear	console.clear()
clg-count	console.count()
clg-countReset	console.countReset()
clg-debug	console.debug()
clg-dir	console.dir()
clg-dirxml	console.dirxml()
clg-error	console.error()
clg-group	console.group()
clg-groupCollapsed	console.groupCollapsed()
clg-groupEnd	console.groupEnd()
clg-info	console.info()
clg or console or log	console.log()
clg-table	console.table()
clg-time	console.time()
clg-timeLog	console.timeLog()
clg-trace	console.trace()
clg-warn	console.warn()

Others

Trigger	Description
ccm or ccmiddleware or create-middleware	Create file skeleton for middleware
rx-action	Create redux action
rx-reducer-switch	Snippet for redux reducer (with switch statements)
rx-reducer-if-else	Snippet for redux reducer (with if-else statements)

• useStateSnippet

const [varName, setVarName] = useState(initialValue);

---

• useRefSnippet

const varName = useRef(initialValue);

---

• useEffectSnippet

useEffect(() => {
  // code goes here

  return () => {
    // clean up
  };
}, [dependency]);

---

• useCallbackSnippet

useCallback(() => {
  // code goes here
}, [dependency]);

---

• comment-block

/**
 *
 */

---

• cc   or   const   or   create-component

Create component skeleton

import React from 'react';
import styles from './{BASE_FILE_NAME}.module.css';

const ${BASE_FILE_NAME} = () => {
    return null;
};

export default ${BASE_FILE_NAME};

---

• cc   or   cre   or   create-component

Create component skeleton in react native

import { StyleSheet } from "react-native";

export const ${BASE_FILE_NAME} = () => {
  return null;
};

const styles = StyleSheet.create({});

---

• rx-action

export const actionName = (payload) => ({
  type: ACTION_TYPE,
  payload: payload,
});

---

• rx-reducer-switch

const initialState = {};

const ${BASE_FILE_NAME} = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPE:
      return { ...state, ...action.payload };

    default:
      return state;
  }
};

export default ${BASE_FILE_NAME};

---

• rx-reducer-if-else

const initialState = {};

const ${BASE_FILE_NAME} = (state = initialState, action) => {
  if (action.type === ACTION_TYPE) {
    return { ...state, ...action.payload };
  }

  return state;
};

export default ${BASE_FILE_NAME};

---

• ccm   or   ccmiddleware   or   create-middleware

Create file skeleton for middleware

import { API_ERROR, API_SUCCESS, apiAction } from '../dux/api';

const ${BASE_FILE_NAME} = () => (next) => (action) => {
  next(action);
  switch (action.type) {
    case ACTION_TYPE:
      break;

    case `${ACTION_TYPE} ${API_SUCCESS}`:
      break;

    case `${ACTION_TYPE} ${API_ERROR}`:
      break;

    default:
      //do nothing;

  }
};

export default ${BASE_FILE_NAME};

---

• prop-import

import PropTypes from 'prop-types';

---

• prop-types

${BASE_FILE_NAME}.propTypes = {
  //propName: PropTypes.bool
};

---

• cx-import

import cx from 'classnames';

---

• exp

export default name;

---

• cct   or   cctest   or   create-test-component

Create test case file skeleton

import React from 'react';

beforeEach(() => {
  jest.clearAllMocks();
});

describe('${BASE_FILE_NAME} Tests', () => {
  // code goes here
});

---

• ccmt   or   ccmtest   or   create-middleware-test

Create file skeleton for middleware test file

import { createMockMiddleware } from "../../helpers/testHelper";
import { apiAction, API_SUCCESS, API_ERROR } from "../../dux/api";
import ${BASE_FILE_NAME} from "../${BASE_FILE_NAME}";

jest.mock("../../dux/api", () => ({
  apiAction: jest.fn(),
  API_SUCCESS: "API_SUCCESS",
}));

beforeEach(() => {
  jest.clearAllMocks();
});

describe("${BASE_FILE_NAME} Middleware", () => {
  const { invoke, next } = createMockMiddleware(${BASE_FILE_NAME});

  describe(`action type ${ACTION_TYPE}`, () => {
    it("test case name", () => {
      const action = {
        type: ACTION_TYPE,
        payload: {},
      };
      invoke(action);
    });
  });

  describe(`action type ${ACTION_TYPE} success`, () => {
    it("test case name", () => {
      const action = {
        type: `${ACTION_TYPE} ${API_SUCCESS}`,
        payload: {},
      };
      invoke(action);
    });
  });

  describe(`action type ${ACTION_TYPE} error`, () => {
    it("test case name", () => {
      const action = {
        type: `${ACTION_TYPE} ${API_ERROR}`,
        payload: {},
      };
      invoke(action);
    });
  });
});

---

• mockDispatch

Create jest mock for useDispatch()

const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useDispatch: () => mockDispatch,
}));

---

• mockTranslation

Create jest mockTranslation

const mockTranslation = jest.fn((key) => key);
jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: mockTranslation,
  }),
}));

---

• mnc   or   mock-named-component

Create jest mock for named component

jest.mock('path to file', () => ({
  nameOfTheFunction: jest.fn(),
}));

---

• muc   or   mock-unnamed-component

Create jest mock for unnamed component

jest.mock('path to file', () =>
  jest.fn(() => <div data-testid="testId" >;)
);

---

• thbcwo

expect().toHaveBeenCalledWith(
  expect.objectContaining({
    foo: 'bar',
  }),
  {}
);

---