diff --git a/README.md b/README.md index ccc2f91..33194f0 100644 --- a/README.md +++ b/README.md @@ -9,14 +9,17 @@ This extension provide you Javascript and React/Redux snippets in ES7 with babel Here is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) ## Supported languages (file extensions) + * JavaScript (.js) * JavaScript React (.jsx) ## Snippets info + Every space inside `{ }` and `( )` means that this is pushed into next line :) `$` represent each step after `tab`. -# Basic Methods +## Basic Methods + |Prefix|Method| |-------:|-------| |`imp→`|`import moduleName from 'module'`| @@ -37,16 +40,18 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`sti→`|`setInterval(() => { }, intervalTime`| |`sto→`|`setTimeout(() => { }, delayTime`| |`prom→`|`return new Promise((resolve, reject) => { }`| +|`cmmb→`|`comment block`| + +## React -# React |Prefix|Method| |-------:|-------| |`imr→`|`import React from 'react'`| |`imrc→`|`import React, { Component } from 'react'`| |`imrcp→`|`import React, { Component } from 'react' & import PropTypes from 'prop-types'`| -|`imrpc→`|`import React, { PureComponent } from 'react';`| +|`imrpc→`|`import React, { PureComponent } from 'react'`| |`imrpcp→`|`import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'`| -|`redux`|`import { connect } from 'react-redux' & import { bindActionCreators } from 'redux'`| +|`redux`|`import { connect } from 'react-redux'| |`rconst→`|`constructor(props) with this.state`| |`rconc→`|`constructor(props, context) with this.state`| |`est→`|`this.state = { }`| @@ -63,12 +68,14 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`props→`|`this.props.propName`| |`state→`|`this.state.stateName`| -# React Native +## React Native + |Prefix|Method| |-------:|-------| |`imrn→`|`import { $1 } from 'react-native'`| -# Redux +## Redux + |Prefix|Method| |-------:|-------| |`rxaction→`|`redux action template`| @@ -76,7 +83,8 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`rxreducer→`|`redux reducer template`| |`rxselect→`|`redux selector template`| -# PropTypes +## PropTypes + |Prefix|Method| |-------:|-------| |`pta→`|`PropTypes.array`| @@ -108,7 +116,8 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`ptsh→`|`PropTypes.shape({ })`| |`ptshr→`|`PropTypes.shape({ }).isRequired`| -# Console +## Console + |Prefix|Method| |-------:|-------| |`clg→`|`console.log(object)`| @@ -123,10 +132,12 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`cwa→`|`console.warn`| |`cin→`|`console.info`| -# React Components -## `rcc` +## React Components + +### `rcc` + ```javascript -import React, { Component } from 'react'; +import React, { Component } from 'react' export default class $1 extends Component { render() { @@ -134,13 +145,15 @@ export default class $1 extends Component {
$2
- ); + ) } } ``` -## `rce` + +### `rce` + ```javascript -import React, { Component } from 'react'; +import React, { Component } from 'react' export class $1 extends Component { render() { @@ -148,15 +161,17 @@ export class $1 extends Component {
$2
- ); + ) } } -export default $1; +export default $1 ``` -## `rcep` + +### `rcep` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' export class $1 extends Component { static propTypes = { @@ -168,15 +183,17 @@ export class $1 extends Component {
$2
- ); + ) } } -export default $1; +export default $1 ``` -## `rpc` + +### `rpc` + ```javascript -import React, { PureComponent } from 'react'; +import React, { PureComponent } from 'react' export default class $1 extends PureComponent { render() { @@ -184,14 +201,16 @@ export default class $1 extends PureComponent {
$2
- ); + ) } } ``` -## `rpcp` + +### `rpcp` + ```javascript -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' export default class $1 extends PureComponent { static propTypes = { @@ -203,14 +222,16 @@ export default class $1 extends PureComponent {
$2
- ); + ) } } ``` -## `rccp` + +### `rccp` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' export default class $1 extends Component { static propTypes = { @@ -222,16 +243,17 @@ export default class $1 extends Component {
$4
- ); + ) } } ``` -## `rcredux` + +### `rcredux` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' export class $1 extends Component { static propTypes = { @@ -243,36 +265,40 @@ export class $1 extends Component {
$4
- ); + ) } } const mapStateToProps = (state) => ({ -}); +}) -const mapDispatchToProps = (dispatch) => bindActionCreators({ +const mapDispatchToProps = { -}, dispatch); +} -export default connect(mapStateToProps, mapDispatchToProps)($1); +export default connect(mapStateToProps, mapDispatchToProps)($1) ``` -## `reduxmap` + +### `reduxmap` + ```javascript const mapStateToProps = (state) => ({ -}); +}) -const mapDispatchToProps = (dispatch) => bindActionCreators({ +const mapDispatchToProps = { -}, dispatch); +} ``` -# React Native Components -## `rnc` +## React Native Components + +### `rnc` + ```javascript -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import React, { Component } from 'react' +import { Text, View } from 'react-native' export default class $1 extends Component { render() { @@ -280,14 +306,16 @@ export default class $1 extends Component { $2 - ); + ) } } ``` -## `rnce` + +### `rnce` + ```javascript -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import React, { Component } from 'react' +import { Text, View } from 'react-native' export class $1 extends Component { render() { @@ -295,106 +323,125 @@ export class $1 extends Component { $2 - ); + ) } } export default $1 ``` -# Others -## `desc` +## Others + +### `cmmb` + +```JS +/** +|-------------------------------------------------- +| $1 +|-------------------------------------------------- +*/ +``` + +### `desc` + ```javascript describe('$1', () => { $2 -}); +}) ``` -## `test` +### `test` + ```javascript test('should $1', () => { $2 -}); +}) ``` -## `tit` +### `tit` + ```javascript it('should $1', () => { $2 -}); +}) ``` -## `stest` +### `stest` + ```javascript -import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'; +import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}' describe('<${1:ComponentName} />', () => { const defaultProps = { - }; + } - const setup = buildSetup(${1: ComponentName }, defaultProps); + const setup = buildSetup(${1: ComponentName }, defaultProps) test('render', () => { - expect(setup().wrapper).toMatchSnapshot(); - }); -}); + expect(setup().wrapper).toMatchSnapshot() + }) +}) ``` -## `sjtest` + +### `sjtest` + ```javascript -import toJson from 'enzyme-to-json'; -import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'; +import toJson from 'enzyme-to-json' +import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}' describe('<${1:ComponentName} />', () => { const defaultProps = { - }; + } - const setup = buildSetup(${1: ComponentName }, defaultProps); + const setup = buildSetup(${1: ComponentName }, defaultProps) test('render', () => { - expect(toJson(setup().wrapper)).toMatchSnapshot(); - }); + expect(toJson(setup().wrapper)).toMatchSnapshot() + }) }) ``` -## `hocredux` +### `hocredux` + ```javascript -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; +import React from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' export const mapStateToProps = state => ({ -}); +}) -export const mapDispatchToProps = dispatch => bindActionCreators({ +export const mapDispatchToProps = { -}, dispatch); +} export const ${1:hocComponentName} = (WrappedComponent) => { - const hocComponent = ({ ...props }) => ; + const hocComponent = ({ ...props }) => hocComponent.propTypes = { - }; + } - return hocComponent; -}; + return hocComponent +} -export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)); +export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)) ``` -## `hoc` + +### `hoc` + ``` javascript -import React from 'react'; -import PropTypes from 'prop-types'; +import React from 'react' +import PropTypes from 'prop-types' export default (WrappedComponent) => { - const hocComponent = ({ ...props }) => ; + const hocComponent = ({ ...props }) => hocComponent.propTypes = { - }; + } - return hocComponent; -}; + return hocComponent +} ``` diff --git a/snippets/snippets.json b/snippets/snippets.json index 5ab610f..72b5dc8 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -3,30 +3,30 @@ // BASIC ES7 JS "import": { "prefix": "imp", - "body": "import ${2:moduleName} from '${1:module}';$0" + "body": "import ${2:moduleName} from '${1:module}'$0" }, "importNoModuleName": { "prefix": "imn", - "body": "import '${1:module}';$0" + "body": "import '${1:module}'$0" }, "importDestructing": { "prefix": "imd", - "body": "import { $2 } from '${1:module}';$0" + "body": "import { $2 } from '${1:module}'$0" }, "importEverything": { "prefix": "ime", - "body": "import * as ${2:alias} from '${1:module}';$0" + "body": "import * as ${2:alias} from '${1:module}'$0" }, "importAs": { "prefix": "ima", - "body": "import { ${2:originalName} as ${3:alias} } from '${1:module}';$0" + "body": "import { ${2:originalName} as ${3:alias} } from '${1:module}'$0" }, "exportNamedFunction": { "prefix": "enf", "body": [ "export const ${1:functionName} = (${2:params}) => {", " $0", - "};", + "}", "" ], "description": "Export named function in ES7 syntax" @@ -36,7 +36,7 @@ "body": [ "export default (${1:params}) => {", " $0", - "};", + "}", "" ], "description": "Export default function in ES7 syntax" @@ -55,7 +55,7 @@ "prefix": "pge", "body": [ "get ${1:propertyName} = () => {", - " return this.${0};", + " return this.${0}", "}", "" ], @@ -65,7 +65,7 @@ "prefix": "pse", "body": [ "set ${1:propertyName} = (${2:value}) => {", - " ${0};", + " ${0}", "}", "" ], @@ -76,7 +76,7 @@ "body": [ "${1:array}.forEach(${2:currentItem} => {", " ${0}", - "});", + "})", "" ], "description": "Creates a forEach statement in ES7 syntax" @@ -123,12 +123,12 @@ }, "destructingObject": { "prefix": "dob", - "body": "const {${1:propertyName}} = ${2:objectToDestruct};", + "body": "const {${1:propertyName}} = ${2:objectToDestruct}", "description": "Creates and assigns a local variable using object destructing" }, "destructingArray": { "prefix": "dar", - "body": "const [${1:propertyName}] = ${2:arrayToDestruct};", + "body": "const [${1:propertyName}] = ${2:arrayToDestruct}", "description": "Creates and assigns a local variable using array destructing" }, "setInterval": { @@ -136,7 +136,7 @@ "body": [ "setInterval(() => {", " ${2}", - "}, ${0:intervalInms});", + "}, ${0:intervalInms})", "" ], "description": "Executes the given function at specified intervals in ES7 syntax" @@ -146,7 +146,7 @@ "body": [ "setTimeout(() => {", " ${2}", - "}, ${1:delayInms});", + "}, ${1:delayInms})", "" ], "description": "Executes the given function after the specified delay in ES7 syntax" @@ -156,64 +156,64 @@ "body": [ "return new Promise((resolve, reject) => {", " ${1}", - "});", + "})", "" ], "description": "Creates and returns a new Promise in the standard ES7 syntax" }, "consoleAssert": { "prefix": "cas", - "body": "console.assert(${1:expression}, ${2:object});", + "body": "console.assert(${1:expression}, ${2:object})", "description": "If the specified expression is false, the message is written to the console along with a stack trace" }, "consoleClear": { "prefix": "ccl", - "body": "console.clear();", + "body": "console.clear()", "description": "Clears the console" }, "consoleCount": { "prefix": "cco", - "body": "console.count(${1:label});", + "body": "console.count(${1:label})", "description": "Writes the the number of times that count() has been invoked at the same line and with the same label" }, "consoleDir": { "prefix": "cdi", - "body": "console.dir(${1:object});", + "body": "console.dir(${1:object})", "description": "Prints a JavaScript representation of the specified object" }, "consoleError": { "prefix": "cer", - "body": "console.error(${1:object});", + "body": "console.error(${1:object})", "description": "Displays a message in the console and also includes a stack trace from where the method was called" }, "consoleGroup": { "prefix": "cgr", - "body": "console.group(\"${1:label}\");", + "body": "console.group(\"${1:label}\")", "description": "Groups and indents all following output by an additional level, until console.groupEnd() is called." }, "consoleGroupEnd": { "prefix": "cge", - "body": "console.groupEnd();", + "body": "console.groupEnd()", "description": "Closes out the corresponding console.group()." }, "consoleLog": { "prefix": "clg", - "body": "console.log(${1:object});", + "body": "console.log(${1:object})", "description": "Displays a message in the console" }, "consoleTrace": { "prefix": "ctr", - "body": "console.trace(${1:object});", + "body": "console.trace(${1:object})", "description": "Prints a stack trace from the point where the method was called" }, "consoleWarn": { "prefix": "cwa", - "body": "console.warn(${1:object});", + "body": "console.warn(${1:object})", "description": "Displays a message in the console but also displays a yellow warning icon along with the logged message" }, "consoleInfo": { "prefix": "cin", - "body": "console.info(${1:object});", + "body": "console.info(${1:object})", "description": "Displays a message in the console but also displays a blue information icon along with the logged message" }, // ========================================================================================================================== @@ -221,52 +221,51 @@ "import React": { "prefix": "imr", "body": [ - "import React from 'react';", + "import React from 'react'", "" ] }, "import React, { Component }": { "prefix": "imrc", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "" ] }, "import React, { Component } & PropTypes": { "prefix": "imrcp", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "" ] }, "import React, { PureComponent }": { "prefix": "imrpc", "body": [ - "import React, { PureComponent } from 'react';", + "import React, { PureComponent } from 'react'", "" ] }, "import React, { PureComponent } & PropTypes": { "prefix": "imrpcp", "body": [ - "import React, { PureComponent } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { PureComponent } from 'react'", + "import PropTypes from 'prop-types'", "" ] }, "import redux statement": { "prefix": "redux", "body": [ - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import { connect } from 'react-redux'", "" ] }, "reactClassCompoment": { "prefix": "rcc", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "", "export default class ${1:componentName} extends Component {", " render() {", @@ -274,7 +273,7 @@ "
", " $0", "
", - " );", + " )", " }", "}", "" @@ -284,7 +283,7 @@ "reactClassExportComponent": { "prefix": "rce", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "", "export class ${1:componentName} extends Component {", " render() {", @@ -292,20 +291,60 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", - "export default ${1:componentName};", + "export default ${1:componentName}", "" ], "description": "Creates a React component class with ES7 module system" }, + "reactFunctionalExportComponent": { + "prefix": "rfe", + "body": [ + "import React from 'react'", + "", + "function ${1:componentName}() {", + " return (", + "
", + " $0", + "
", + " )", + "}", + "export default ${1:componentName}", + "" + ], + "description": "Creates a React Functional Component with ES7 module system" + }, + "reactFunctionalExportComponentWithPropTypes": { + "prefix": "rfep", + "body": [ + "import React from 'react'", + "import PropTypes from 'prop-types'", + "", + "${1:componentName}.propTypes = {", + "", + "}", + "", + "function ${1:componentName}() {", + " return (", + "
", + " $0", + "
", + " )", + "}", + "", + "export default ${1:componentName}", + "" + ], + "description": "Creates a React Functional Component with ES7 module system" + }, "reactClassExportComponentWithPropTypes": { "prefix": "rcep", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "", "export class ${1:componentName} extends Component {", " static propTypes = {", @@ -317,11 +356,11 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", - "export default ${1:componentName};", + "export default ${1:componentName}", "" ], "description": "Creates a React component class with ES7 module system" @@ -329,7 +368,7 @@ "reactClassPureComponent": { "prefix": "rpc", "body": [ - "import React, { PureComponent } from 'react';", + "import React, { PureComponent } from 'react'", "", "export default class ${1:componentName} extends PureComponent {", " render() {", @@ -337,9 +376,9 @@ "
", " $0", "
", - " );", + " )", " }", - "};", + "}", "" ], "description": "Creates a React component class with ES7 module system" @@ -347,8 +386,8 @@ "reactClassPureComponentWithPropTypes": { "prefix": "rpcp", "body": [ - "import React, { PureComponent } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { PureComponent } from 'react'", + "import PropTypes from 'prop-types'", "", "export default class ${1:componentName} extends PureComponent {", " static propTypes = {", @@ -360,9 +399,9 @@ "
", " $0", "
", - " );", + " )", " }", - "};", + "}", "" ], "description": "Creates a React component class with ES7 module system" @@ -370,8 +409,8 @@ "reactClassCompomentPropTypes": { "prefix": "rccp", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "", "export default class ${1:componentName} extends Component {", " static propTypes = {", @@ -383,7 +422,7 @@ "
", " $0", "
", - " );", + " )", " }", "}", "" @@ -393,10 +432,9 @@ "reactClassCompomentRedux": { "prefix": "rcredux", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", + "import { connect } from 'react-redux'", "", "export class ${1:componentName} extends Component {", " static propTypes = {", @@ -408,19 +446,19 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", "const mapStateToProps = (state) => ({", " ", - "});", + "})", "", - "const mapDispatchToProps = (dispatch) => bindActionCreators({", + "const mapDispatchToProps = {", " ", - "}, dispatch);", + "}", "", - "export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName});", + "export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName})", "" ], "description": "Creates a React component class with PropTypes with connected redux and ES7 module system" @@ -430,11 +468,11 @@ "body": [ "const mapStateToProps = (state) => ({", " ${1}", - "});", + "})", "", - "const mapDispatchToProps = (dispatch) => bindActionCreators({", + "const mapDispatchToProps = {", " ", - "}, dispatch);", + "}", "" ] }, @@ -442,7 +480,7 @@ "prefix": "rconst", "body": [ "constructor(props) {", - " super(props);", + " super(props)", "", " this.state = {", " $0", @@ -450,14 +488,14 @@ "}", "" ], - "description": "Adds a default constructor for it('', () => {});the class that contains props as arguments" + "description": "Adds a default constructor for it('', () => {})the class that contains props as arguments" }, "emptyState": { "prefix": "est", "body": [ "this.state = {", " $1", - "};", + "}", "" ], "description": "Creates empty state object. To be used in a constructor." @@ -540,20 +578,20 @@ "
", " $0", "
", - " );", + " )", "}" ], "description": "Basic render." }, "componentSetStateObject": { "prefix": "sst", - "body": "this.setState({$0});", + "body": "this.setState({$0})", "description": "Performs a shallow merge of nextState into current state" }, "componentSetStateFunc": { "prefix": "ssf", "body": [ - "this.setState((state, props) => { return { $0 }});", + "this.setState((state, props) => { return { $0 }})", "" ], "description": "Performs a shallow merge of nextState into current state" @@ -575,7 +613,7 @@ "export const ${1:actionName} = (${2:param}) => ({", " type: ${3:type},", " payload: ${4:payload}", - "});", + "})", "" ] }, @@ -588,18 +626,18 @@ "body": [ "const initialState = {", "", - "};", + "}", "", "export default (state = initialState, action) => {", " switch (action.type) {", "", " case ${1:typeName}:", - " return { ...state };", + " return { ...state }", "", " default:", - " return state;", + " return state", " }", - "};", + "}", "" ] }, @@ -617,8 +655,8 @@ "reactNativeComponent": { "prefix": "rnc", "body": [ - "import React, { Component } from 'react';", - "import { Text, View } from 'react-native';", + "import React, { Component } from 'react'", + "import { Text, View } from 'react-native'", "", "export default class ${1:componentName} extends Component {", " render() {", @@ -626,7 +664,7 @@ " ", " ${2:textInComponent} ", " ", - " );", + " )", " }", "}" ] @@ -634,8 +672,8 @@ "reactNativeComponentExport": { "prefix": "rnce", "body": [ - "import React, { Component } from 'react';", - "import { Text, View } from 'react-native';", + "import React, { Component } from 'react'", + "import { Text, View } from 'react-native'", "", "export class ${1:componentName} extends Component {", " render() {", @@ -643,11 +681,11 @@ " ", " ${2:textInComponent} ", " ", - " );", + " )", " }", "}", "", - "export default ${1:componentName};" + "export default ${1:componentName}" ] }, "reactNativeImport": { @@ -813,13 +851,25 @@ "description": "An object taking on a particular shape required" }, // ========================================================================================================================== + // Comments + "Comment Big Block": { + "prefix": "cmmb", + "body": [ + "/**", + "|--------------------------------------------------", + "| $1", + "|--------------------------------------------------", + "*/" + ] + }, + // ========================================================================================================================== // Others "describeBlock": { "prefix": "desc", "body": [ "describe('$1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `describe` block" @@ -829,7 +879,7 @@ "body": [ "test('should $1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `test` block" @@ -839,7 +889,7 @@ "body": [ "it('should $1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `it` block" @@ -847,38 +897,38 @@ "setupTest": { "prefix": "stest", "body": [ - "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}';", + "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'", "", "describe('<${1:ComponentName} />', () => {", " const defaultProps = {", "", - " };", + " }", "", - " const setup = buildSetup(${1:ComponentName}, defaultProps);", + " const setup = buildSetup(${1:ComponentName}, defaultProps)", "", " test('render', () => {", - " expect(setup().wrapper).toMatchSnapshot();", - " });", - "});", + " expect(setup().wrapper).toMatchSnapshot()", + " })", + "})", "" ] }, "setupTestWithEnzymeToJson": { "prefix": "sjtest", "body": [ - "import toJson from 'enzyme-to-json';", - "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}';", + "import toJson from 'enzyme-to-json'", + "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'", "", "describe('<${1:ComponentName} />', () => {", " const defaultProps = {", "", - " };", + " }", "", - " const setup = buildSetup(${1:ComponentName}, defaultProps);", + " const setup = buildSetup(${1:ComponentName}, defaultProps)", "", " test('render', () => {", - " expect(toJson(setup().wrapper)).toMatchSnapshot();", - " });", + " expect(toJson(setup().wrapper)).toMatchSnapshot()", + " })", "})", "" ] @@ -886,46 +936,45 @@ "hocComponentWithRedux": { "prefix": "hocredux", "body": [ - "import React from 'react';", - "import PropTypes from 'prop-types';", - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import React from 'react'", + "import PropTypes from 'prop-types'", + "import { connect } from 'react-redux'", "", "export const mapStateToProps = state => ({", "", - "});", - "", - "export const mapDispatchToProps = dispatch => bindActionCreators({", + "})", "", - "}, dispatch);", + "export const mapDispatchToProps = {", + " ", + "}", "", "export const ${1:hocComponentName} = (WrappedComponent) => {", - " const hocComponent = ({ ...props }) => ;", + " const hocComponent = ({ ...props }) => ", "", " hocComponent.propTypes = {", - " };", + " }", "", - " return hocComponent;", - "};", + " return hocComponent", + "}", "", - "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent));", + "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))", "" ] }, "hocComponent": { "prefix": "hoc", "body": [ - "import React from 'react';", - "import PropTypes from 'prop-types';", + "import React from 'react'", + "import PropTypes from 'prop-types'", "", "export default (WrappedComponent) => {", - " const hocComponent = ({ ...props }) => ;", + " const hocComponent = ({ ...props }) => ", "", " hocComponent.propTypes = {", - " };", + " }", "", - " return hocComponent;", - "};", + " return hocComponent", + "}", "" ] }