Bash script to add Functional TypeScript React Component with SCSS and Unit Test

add_component.sh

#!/bin/bash
# run mv add_component.sh /usr/local/bin
# Creates boilerplate for Functional TypeScript React Component

mkdir $1
cd $1
touch $1.tsx
touch $1.scss
touch $1.spec.tsx

# Component
echo "import React from 'react';" >> $1.tsx
echo "import './$1.scss';" >> $1.tsx
echo "" >> $1.tsx
echo "interface $1Props {}" >> $1.tsx
echo "" >> $1.tsx
echo "export const $1Component: React.FC<$1Props> = ({}) => {" >> $1.tsx
echo "  return (" >> $1.tsx
echo "    <div className='$1-component'>$1 works!</div>" >> $1.tsx
echo "  );" >> $1.tsx
echo "};" >> $1.tsx

# SCSS
echo ".$1-component {" >> $1.scss
echo "" >> $1.scss
echo "}" >> $1.scss

# Unit test
echo "import React from 'react';" >> $1.spec.tsx
echo "import { render, cleanup } from '@testing-library/react';" >> $1.spec.tsx
echo "import { unmountComponentAtNode } from 'react-dom';" >> $1.spec.tsx
echo "import { $1Component } from './$1';" >> $1.spec.tsx
echo "" >> $1.spec.tsx
echo "describe('$1Component', () => {" >> $1.spec.tsx
echo "  let container: any;" >> $1.spec.tsx
echo "" >> $1.spec.tsx
echo "  beforeEach(() => {" >> $1.spec.tsx
echo "    container = document.createElement('div');" >> $1.spec.tsx
echo "    document.body.appendChild(container);" >> $1.spec.tsx
echo "  });" >> $1.spec.tsx
echo "" >> $1.spec.tsx
echo "  afterEach(() => {" >> $1.spec.tsx
echo "    unmountComponentAtNode(container);" >> $1.spec.tsx
echo "    container.remove();" >> $1.spec.tsx
echo "    cleanup();" >> $1.spec.tsx
echo "  });" >> $1.spec.tsx
echo "" >> $1.spec.tsx
echo "  it('should render without crashing', () => {" >> $1.spec.tsx
echo "    const component = render(<CoolFeatureComponent />);" >> $1.spec.tsx
echo "" >> $1.spec.tsx
echo "    expect(component).toBeTruthy();" >> $1.spec.tsx
echo "  });" >> $1.spec.tsx
echo "});" >> $1.spec.tsx