Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Snippets for React/React-Native and jestNew to Visual Studio Code? Get it now.
Snippets for React/React-Native and jest

Snippets for React/React-Native and jest

Akash Dhotre

|
153 installs
| (0) | Free
An extension for react/react-native/jest snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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 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   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',
  }),
  {}
);

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft