Skip to content

Instantly share code, notes, and snippets.

@RyKilleen
Last active February 5, 2019 18:07
Show Gist options
  • Save RyKilleen/290497bd740bb06efd0c00ebcbc1521d to your computer and use it in GitHub Desktop.
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
{
"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"
}
}
@RyKilleen
Copy link
Author

Default to shallow rendering.

@RyKilleen
Copy link
Author

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