-
-
Save LizCottrell/4fed3b6617a7cc104d63bd282c01c8e9 to your computer and use it in GitHub Desktop.
VS Code User Snippets for Javascript React Components (Functional, Class, and Testing). https://code.visualstudio.com/docs/editor/userdefinedsnippets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "Stateless Component": { | |
| "prefix": "component:stateless", | |
| "body" : [ | |
| "import React from 'react';", | |
| "import PropTypes from 'prop-types';", | |
| "const propTypes = {", | |
| "", | |
| "};", | |
| "", | |
| "const defaultProps = {", | |
| "", | |
| "};", | |
| "function ${TM_FILENAME/([^.]*)\\..+$/$1/} (props) {", | |
| "", | |
| "}", | |
| "", | |
| "${TM_FILENAME/([^.]*)\\..+$/$1/}.propTypes = propTypes;", | |
| "${TM_FILENAME/([^.]*)\\..+$/$1/}.defaultProps = defaultProps;", | |
| "export default ${TM_FILENAME/([^.]*)\\..+$/$1/};" | |
| ], | |
| "description": "Skeleton of Presentational React Component" | |
| }, | |
| "Class Component": { | |
| "prefix": "component:class", | |
| "body" : [ | |
| "import React, { Component } from 'react';", | |
| "import PropTypes from 'prop-types';", | |
| "", | |
| "const propTypes = {", | |
| "", | |
| "};", | |
| "", | |
| "const defaultProps = {", | |
| "", | |
| "};", | |
| "class ${TM_FILENAME/([^.]*)\\..+$/$1/} extends Component {", | |
| " constructor(props) {", | |
| " super(props);", | |
| " }", | |
| "}", | |
| "", | |
| "${TM_FILENAME/([^.]*)\\..+$/$1/}.propTypes = propTypes;", | |
| "${TM_FILENAME/([^.]*)\\..+$/$1/}.defaultProps = defaultProps;", | |
| "export default ${TM_FILENAME/([^.]*)\\..+$/$1/};" | |
| ], | |
| "description": "Skeleton of Presentational React Component" | |
| }, | |
| "Test Component": { | |
| "prefix": "component:test", | |
| "body" : [ | |
| "import React from 'react';", | |
| "import { mount } from 'enzyme';", | |
| "import ${TM_FILENAME/([^.]*)\\..+$/$1/} from './${TM_FILENAME/([^.]*)\\..+$/$1/}';", | |
| "", | |
| "// Setup", | |
| "const setup = propOverrides => {", | |
| " const props = Object.assign({}, propOverrides);", | |
| "", | |
| " const wrapper = shallow(<${TM_FILENAME/([^.]*)\\..+$/$1/} {...props} />);", | |
| "", | |
| " return {", | |
| " props,", | |
| " wrapper", | |
| " };", | |
| "};", | |
| "", | |
| "describe('<${TM_FILENAME/([^.]*)\\..+$/$1/} />', () => {", | |
| " // Test Render", | |
| " it('renders', () => {", | |
| " const { wrapper } = setup();", | |
| " expect(wrapper.exists()).toBe(true);", | |
| " });", | |
| "", | |
| " // Test that props render approp. output", | |
| "", | |
| " // Test that bound events call appropriate functions, especially passed as props (jest.fn)", | |
| "", | |
| " // Test Edge Cases: can arrays be empty? Can props be null? Can something be a number OR a string? Off by one errors? Error States?", | |
| "});" | |
| ], | |
| "description": "Test Boilerplate for Components" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment