VSCODE snippets for JavaScript

my.code-snippets

{
    // Place your snippets for javascriptreact 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.
    "React Dump": {
        "prefix": "DUMP",
        "body": [
            "import React from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "export const ${1:ComponentName} = ({ id }) => (",
            "    <h1 id={id}>dump component</h1>",
            ");",
            "",
            "$1.propTypes = {",
            "    id: PropTypes.string,",
            "};",
            ""
        ],
        "description": "Dump React Component"
    },
    "React Stateful": {
        "prefix": "STATEFUL",
        "body": [
            "import React from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "export const ${1:ComponentName} = (props) => {",
            "    const $ = {",
            "        ...React.Component.prototype,",
            "        props,",
            "        state: {",
            "            something: false,",
            "        },",
            "    };",
            "",
            "    $.componentWillReceiveProps = (nextProps) => {};",
            "    $.componentWillMount = () => {};",
            "    $.componentDidMount = () => {};",
            "    $.shouldComponentUpdate = () => true;",
            "    $.componentWillUpdate = () => {};",
            "    $.componentDidUpdate = () => {};",
            "    $.componentWillUnmount = () => {};",
            "    $.componentDidCatch = () => {};",
            "",
            "    $.render = () => {",
            "        const { id, children } = $.props;",
            "",
            "        return (",
            "            <div className={'$1'}>",
            "                { children }",
            "            </div>",
            "        );",
            "    };",
            "",
            "    return $;",
            "};",
            "",
            "$1.propTypes = {",
            "    className: PropTypes.string,",
            "};",
            "",
        ],
        "description": "Stateful React Component"
    },
    "Function Test": {
        "prefix": "TESTFUNC",
        "body": [
            "import { ${1:functionName} } from './$1';",
            "",
            "describe('$1()', () => {",
            "    it('is a function', () => {",
            "        const actual = typeof $1;",
            "        const expected = 'function';",
            "        expect(actual).toEqual(expected);",
            "    });",
            "});",
            ""
        ],
        "description": "Test React Component"
    },
    "React Test": {
        "prefix": "TESTREACT",
        "body": [
            "import React from 'react';",
            "import { mount } from 'enzyme';",
            "import { ${1:ComponentName} } from './$1';",
            "",
            "describe('<$1>', () => {",
            "    it('is a function', () => {",
            "        const actual = typeof $1;",
            "        const expected = 'function';",
            "        expect(actual).toEqual(expected);",
            "    });",
            "",
            "    it('renders', () => {",
            "        const wrapper = mount(<$1 />);",
            "        const actual = wrapper.find('.a-className').length;",
            "        const expected = 1;",
            "        expect(actual).toEqual(expected);",
            "    });",
            "});",
            ""
        ],
        "description": "Test React Component"
    },
}