Last active
February 5, 2019 18:07
-
-
Save RyKilleen/290497bd740bb06efd0c00ebcbc1521d 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 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" | |
} | |
} |
Update to include filename as component name
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Default to shallow rendering.