Merge pull request #1 from potreco/dev

Added Testing Tools and some fixes.
Created the 1.0.0 version

Author: patrickjmeurer

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -3,4 +3,7 @@
 *.css
 /node_modules
 /build
-vite.config.ts
+vite.config.ts
+jest.setup.ts
+jest.config.js
+/test/__mocks__/fileMock.js

.eslintrc.json

@@ -1,7 +1,8 @@
 {
     "env": {
         "browser": true,
-        "es2021": true
+        "es2021": true,
+        "jest": true
     },
     "extends": [
         "plugin:react/recommended",

README.md

@@ -1,22 +1,30 @@
 # ViteRC ❤️‍🔥
 
-A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier and Git hooks with Husky out of the box 📦
+A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦
 
 ![Vite](https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge&logo=vite&logoColor=FFD62E)
 ![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
 ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
 ![ESLint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)
 ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
+![Jest](https://img.shields.io/badge/jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
+![Testing Library](https://img.shields.io/badge/testing%20library-E33332?style=for-the-badge&logo=testing-library&logoColor=white)
 
-![Screenshot](https://i.imgur.com/nqqArrR.png)
+![Screenshot](https://i.imgur.com/4dpYsyG.png)
 
 ## Features
 
-- React
-- Typescript
-- Eslint (Airbnb)
-- Prettier
-- Husky
+- ⚡️ [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
+- ⚛️ [React 18](https://reactjs.org/) - A JavaScript library for building user interfaces
+- 💎 [TypeScript](https://www.typescriptlang.org/) - Why not?!
+- 🔨 [EsLint](https://eslint.org/) - Pluggable JavaScript linter
+- 🌀 [Prettier](https://prettier.io) - Opinionated Code Formatter
+- 🐺 [Husky](https://github.com/typicode/husky) - Native Git hooks
+- ⚙️ [Jest](https://jestjs.io/) - Testing libraries
+
+## Why
+
+This template arose out of a need to unite all the above libraries, which were not found in the existing Vite templates. This template has an active contributors that will update everything on this template as needed
 
 ## Usage
 
@@ -35,61 +43,27 @@ yarn dev
 
 ## Available commands
 
-Run in development mode
-
-```bash
-  yarn dev
-```
-
-Create production build
-
-```bash
-  yarn build
-```
-
-Serve production build locally
-
-```bash
-  yarn preview
-```
-
-Install Husky
-
-```bash
-  yarn prepare
-```
-
-Run ESLint linting
-
-```bash
-  yarn lint
-```
+<p>In this project, you can run the following scripts:</p>
 
-Run Prettier formatting
-
-```bash
-  yarn format
-```
-
-Run TypeScript compiling
-
-```bash
-  yarn compile
-```
+| Script        | Description                                                                 |
+| ------------- | --------------------------------------------------------------------------- |
+| yarn dev      | Runs the app in the development mode.                                       |
+| yarn build    | Builds the app for production to the `dist` folder.                         |
+| yarn preview  | Builds the app for production to the `dist` folder, and run locally server. |
+| yarn lint     | Runs the Eslint and show code problems                                      |
+| yarn lint:fix | Runs the Eslint and fix the code problems                                   |
+| yarn format   | Runs the Prettier and fix code style                                        |
+| yarn compile  | Runs the TS Compiling                                                       |
+| yarn test     | Run the app tests.                                                          |
 
 ## TODO
 
 - [x] Eslint
 - [x] Prettier
 - [x] Husky
-- [] Testing Tools
-
-## Resources
-
-- [Vite](https://github.com/vitejs/vite)
-- [Airbnb JS Style Guide](https://github.com/airbnb/javascript)
-- [Airbnb React Style Guide](https://github.com/airbnb/javascript/tree/master/react)
-- [Husky](https://github.com/typicode/husky)
+- [x] Testing Tools
+- [ ] Absolute imports
+- [ ] Commit linting
 
 ## License
 

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ViterRC</title>
+    <title>ViteRC</title>
   </head>
   <body>
     <div id="root"></div>

jest.config.js

@@ -0,0 +1,11 @@
+export default {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  moduleNameMapper: {
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -1,30 +1,34 @@
 {
   "name": "viterc",
   "private": false,
-  "version": "0.0.0",
-  "description": "A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier out of the box 📦",
+  "version": "1.0.0",
+  "description": "A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦",
   "license": "MIT",
   "author": {
     "name": "Patrick Jean Meurer",
     "email": "[email protected]",
     "url": "https://github.com/potreco"
   },
-  "type": "module",
   "scripts": {
+    "postinstall": "husky install",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "prepare": "husky install",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "format": "prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write",
-    "compile": "tsc"
+    "compile": "tsc",
+    "test": "jest"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/jest": "^28.1.5",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
@@ -40,7 +44,12 @@
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "husky": "^8.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "prettier": "^2.7.1",
+    "ts-jest": "^28.0.6",
+    "ts-node": "^10.9.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.0"
   }

src/assets/react.svg renamed to public/react.svg

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import App from './App';
+
+describe('Render the app correctly', () => {
+  test('should render the title', async () => {
+    render(<App />);
+
+    const header = await screen.findByText(/ViteRC/);
+
+    expect(header).toBeInTheDocument();
+  });
+
+  test('should render the button and counter', async () => {
+    render(<App />);
+
+    const button = await screen.findByRole('button');
+
+    expect(button).toBeInTheDocument();
+    expect(button.innerHTML).toBe('count is 0');
+
+    await user.click(button);
+    await user.click(button);
+    await user.click(button);
+
+    expect(button.innerHTML).toBe('count is 3');
+  });
+  test('should render the `read the docs` row', async () => {
+    render(<App />);
+
+    const readTheDocs = await screen.findByTestId('read-the-docs');
+
+    expect(readTheDocs).toBeInTheDocument();
+  });
+});

src/App.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import reactLogo from './assets/react.svg';
+import reactLogo from '../public/react.svg';
 import './App.css';
 
 function App() {
@@ -11,13 +11,13 @@ function App() {
         <img src="/vite.svg" className="logo" alt="Vite logo" />
         <img src={reactLogo} className="logo react" alt="React logo" />
       </div>
-      <h2>Vite + React + TypeScript + Eslint (Airbnb) + Eslint = ViteRC❤️‍🔥</h2>
+      <h2>Vite + React + TypeScript + Eslint (Airbnb) + Eslint + Jest + Testing Library = ViteRC❤️‍🔥</h2>
       <div className="card">
         <button type="button" onClick={() => setCount(count + 1)}>
           count is {count}
         </button>
       </div>
-      <p className="read-the-docs">
+      <p className="read-the-docs" data-testId="read-the-docs">
         <a className="App-link" href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener noreferrer">
           Vite Docs
         </a>
@@ -47,6 +47,19 @@ function App() {
           Airbnb React Style Guide
         </a>
         {' | '}
+        <a
+          className="App-link"
+          href="https://jestjs.io/pt-BR/docs/getting-started"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Jest
+        </a>
+        {' | '}
+        <a className="App-link" href="https://testing-library.com" target="_blank" rel="noopener noreferrer">
+          Testing Library
+        </a>
+        {' | '}
         <a className="App-link" href="https://github.com/potreco/viterc" target="_blank" rel="noopener noreferrer">
           Template repository
         </a>

src/App.tsx

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';