Last active
April 27, 2020 22:54
-
-
Save cmacdonnacha/334ef14cb301c426ee6eb166eb500a5a to your computer and use it in GitHub Desktop.
VS Code Snippets - React Typescript
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
| { | |
| "functionComponent": { | |
| "prefix": "fc", | |
| "body": [ | |
| "import React from 'react';", | |
| "import styled from 'styled-components/macro';", | |
| "", | |
| "const Container = styled.div`", | |
| " display: flex;", | |
| " flex: 1;", | |
| " background-color: white;", | |
| " justify-content: center;", | |
| " align-items: center;", | |
| "`;", | |
| "", | |
| "const ${1} = () => {", | |
| " return <Container>${1}</Container>;", | |
| "}", | |
| "", | |
| "export default ${1};", | |
| ], | |
| "description": "React functional component which is stateless" | |
| }, | |
| "functionComponentWithProps": { | |
| "prefix": "fcp", | |
| "body": [ | |
| "import React from 'react';", | |
| "import styled from 'styled-components/macro';", | |
| "", | |
| "interface Props {", | |
| " myProp: string;", | |
| " onClick: () => void;", | |
| "}", | |
| "", | |
| "const Container = styled.div`", | |
| " display: flex;", | |
| " flex: 1;", | |
| " background-color: white;", | |
| " justify-content: center;", | |
| " align-items: center;", | |
| "`;", | |
| "", | |
| "const ${1} = ({myProp, onClick}:Props) => {", | |
| " return <Container>${1}</Container>;", | |
| "}", | |
| "", | |
| "export default ${1};", | |
| ], | |
| "description": "React functional component with props" | |
| }, | |
| "functionComponentWithHooks": { | |
| "prefix": "fch", | |
| "body": [ | |
| "import React, { useState } from 'react';", | |
| "import styled from 'styled-components/macro';", | |
| "", | |
| "interface Props {", | |
| " myProp: string;", | |
| " onClick: () => void;", | |
| "}", | |
| "", | |
| "const Container = styled.div`", | |
| " display: flex;", | |
| " flex: 1;", | |
| " background-color: white;", | |
| " justify-content: center;", | |
| " align-items: center;", | |
| "`;", | |
| "", | |
| "const ${1} = ({myProp, onClick}:Props) => {", | |
| " const [count, setCount] = useState<number>(0);", | |
| "", | |
| " return <Container>${1}</Container>;", | |
| "}", | |
| "", | |
| "export default ${1};", | |
| ], | |
| "description": "React functional component with Hooks" | |
| }, | |
| "integrationTest": { | |
| "prefix": "it", | |
| "body": [ | |
| "import React from 'react';" | |
| "import { render, screen } from '@testing-library/react';" | |
| "import ${1} from './${1}';" | |
| "", | |
| "test('should find text inside component', () => {", | |
| " // Arrange", | |
| " render(<${1} />);", | |
| "", | |
| " // Act", | |
| " const element = screen.getByText('${1}');", | |
| "", | |
| " // Assert", | |
| " expect(element).toBeTruthy();", | |
| "});", | |
| ], | |
| "description": "Integration Test using react-testing-library" | |
| }, | |
| "integrationTestRouterRedux": { | |
| "prefix": "itrr", | |
| "body": [ | |
| "import React from 'react';" | |
| "import { screen } from '@testing-library/react';" | |
| "import ${1} from './${1}';" | |
| "import { renderWithRouterRedux } from './utils/test-utils';" | |
| "", | |
| "test('should find text inside component', () => {", | |
| " // Arrange", | |
| " const { getByText } = renderWithRouterRedux(<${1} />, ['/INSERT_ROUTE_URL_HERE']); | |
| "", | |
| " // Act", | |
| " const element = getByText('${1}');", | |
| "", | |
| " // Assert", | |
| " expect(element).toBeTruthy();", | |
| "});", | |
| ], | |
| "description": "Integration test which includes a router and redux store" | |
| }, | |
| // ========================================================================================================================== | |
| // Javascript | |
| "methodNoParms": { | |
| "prefix": "met", | |
| "body": "${1:methodName}() {\n\t${0}\n}", | |
| "description": "Creates a method with no paramters inside a class in ES6 syntax" | |
| }, | |
| "consoleLog": { | |
| "prefix": "clg", | |
| "body": "console.log('${1:object}');", | |
| "description": "Displays an object in the console with its name" | |
| }, | |
| "consoleLogObject": { | |
| "prefix": "clo", | |
| "body": "console.log('${1:object} :', ${1:object});", | |
| "description": "Displays an object in the console with its name" | |
| }, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment