Create a Typescript NextJS Project with Jest & Cypress

yarn create next-app --typescript
> ✔ What is your project named? boilerplate-next
...
cd boilerplate-next
yarn dev
git remote add origin git@github.com:<USERNAME>/boilerplate-next.git
git push -u origin main
  • https://github.com/<USERNAME>/boilerplate-next
yarn add -D ts-node prettier jest husky lint-staged eslint-config-prettier eslint-plugin-jest-dom @testing-library/jest-dom @testing-library/react @types/testing-library__jest-dom @types/testing-library__react @typescript-eslint/eslint-plugin
"scripts": { 
...
"test": "jest --watch",
"test:ci": "jest --ci"
}
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
yarn add -D cypress @types/cypress
// cypress.json 
{}
"scripts": { 
...
"cypress": "cypress open"
}
const asModule = {}
export default asModule
mkdir __tests__
touch __tests__/index.test.tsx
mkdir .github
mkdir .github/workflows
touch .github/workflows/test.yml

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store