Snippets
List of snippets
Basic Snippets
Hooks
React
React Native
Jest
Console
Others
const [varName, setVarName] = useState(initialValue);
const varName = useRef(initialValue);
useEffect(() => {
// code goes here
return () => {
// clean up
};
}, [dependency]);
useCallback(() => {
// code goes here
}, [dependency]);
/**
*
*/
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({});
export const actionName = (payload) => ({
type: ACTION_TYPE,
payload: payload,
});
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};
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};
import PropTypes from 'prop-types';
${BASE_FILE_NAME}.propTypes = {
//propName: PropTypes.bool
};
import cx from 'classnames';
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);
});
});
});
Create jest mock for useDispatch()
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch,
}));
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" >;)
);
expect().toHaveBeenCalledWith(
expect.objectContaining({
foo: 'bar',
}),
{}
);