Personal collection of frequented snippets for VSCode. Find it in the VSCode Marketplace
Stack: TypeScript ・ React ・ React Testing Library ・ Cypress
Found a lot of the current vscode snippets in the marketplace have aliases difficult to remember. Ain't nobody got time for that. Created a personal set that makes it faster to retrieve & autocomplete.
add-- Adds a snippetnew-- Creates a new file template using the filenameclip-- Wraps the clipboard contents in a snippet
add-ComponentProps:
works for JS & TS files
| Prefix | Method |
|---|---|
clip-variable | const variable = YOUR_CLIPBOARD |
clip-console | console.log(YOUR_CLIPBOARD) |
works for TS files
| Prefix | Method | Also works with |
|---|---|---|
add-interface | export interface IComponentContext { props: string } | interface |
add-type | export type TSomething = props | type |
ts-ignore | // @ts-ignore |
| Prefix | Method | Also works with |
|---|---|---|
add-useState | const [item, setItem] = useState(CHOOSE_DEFAULTS) | useState |
add-useEffect | useEffect(() => { }, []) | useEffect |
add-useContext | const featureContext = useContext(FeatureContext) | useContext |
add-useMemo | const memoizedValue = useMemo(() => computeExpensiveValue(deps), [deps]) | useMemo |
add-useCallback | const memoizedCallback = useCallback(() => { fn(deps) }, [deps]) | useCallback |
add-useReducer | const [state, dispatch] = useReducer(reducer, initializerArg) | useReducer |
add-useContext | const featureContext = useContext(FeatureContext) | useContext |
add-useRef | const ref = useRef(initialValue) | useRef |
interface IComponentProps { props: string } const Component: FC<IComponentProps> = (props) => {import React, { FC } from "react"; const Component: FC = () => { return <div></div>; }; export default Component;import React, { FC } from "react"; interface IComponentProps { prop: <string|boolean|() => void|>; } const Component: FC<IComponentProps> = ({ prop }) => { return <div>{prop}</div>; }; export default Component;import React, { createContext, ReactNode } from 'react' export interface IComponentContextState { } const defaultState: IComponentContextState = { } export const ComponentContext = createContext(defaultState) export const ComponentContextProvider = ({ children }: { children: ReactNode }): JSX.Element => { const state = return <ComponentContext.Provider value={state}>{children}</ComponentContext.Provider> }const Component: FC = () => { return <div></div>; };interface IComponentProps { prop: string; } const Component: FC<IComponentProps> = ({ prop }) => { return <div>{prop}</div>; };Includes a quick way to watch your generated spec file. Just copy & paste to your console.
Remove commented snippet when done.
works for JS & TS files
import { helper } from "./helper"; describe("helper", () => { it("", () => { const valueCheck = helper(); expect(valueCheck).toBeTruthy(); }); }); // npx jest ~/<FILE_PATH_TO_YOUR_COMPONENT>/helper.spec.ts --watchends in .tsx
Uses react-testing-library. Links to the testing library's cheatsheet.
Includes a quick way to watch your generated spec file. Just copy & paste to your console.
Remove commented links and snippet when done.
import React from "react"; import { screen, fireEvent, waitFor, cleanup, render, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import Component from "./Component"; // See https://testing-library.com/docs/react-testing-library/cheatsheet describe("<Component />", () => { beforeEach(() => { render(<Component />); }); afterEach(cleanup); it("renders ", () => { expect(screen.getByText(/text/)).toBeTruthy(); }); }); // npx jest ~/<FILE_PATH_TO_YOUR_COMPONENT>/Component.spec.tsx --watchit("renders ", () => { expect(screen.getByText(/text/)).toBeTruthy(); });it("should allow user to enter values", async () => { fireEvent.change(screen.getByTestId("data-test"), { target: { value: "VALUE" }, }); userEvent.type(screen.getByTestId("data-test"), "{enter}"); await waitFor(() => expect(screen.getByText(/text/i)).toBeTruthy()); });describe("", () => { beforeEach(() => { cy.route("GET", "", {}).as(""); cy.visit("/"); cy.wait("@"); }); it("", () => {}); });it('', () => { cy. })cy.route("GET", "").as("");--
😎