Implement testing library (#2)

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/2

.drone.yml

@@ -0,0 +1,21 @@
+---
+kind: pipeline
+name: node-16-lts
+
+steps:
+- name: test
+  image: node:16
+  commands:
+  - npm install
+  - npm test
+
+---
+kind: pipeline
+name: node-latest
+
+steps:
+- name: test
+  image: node
+  commands:
+  - npm install
+  - npm test

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
   ],
   rules: {
     'space-before-function-paren': ['error', 'never'],
+    indent: ['warn', 2],
     semi: ['warn', 'always']
   }
 };

README.md

@@ -37,3 +37,10 @@ Configure the file `.env.development` with the url
 Run `npm ci`
 
 Run `npm run build`
+
+
+# Run the tests
+
+Run `npm ci`
+
+Run `npm test`

package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run coverage"
   },
   "dependencies": {
     "framer-motion": "^6.5.1",
@@ -15,6 +18,9 @@
     "react-svg-pan-zoom": "^3.11.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.1",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-svg-pan-zoom": "^3.3.5",
@@ -28,10 +34,12 @@
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
+    "jsdom": "^20.0.0",
     "postcss": "^8.4.14",
     "sass": "^1.54.0",
     "tailwindcss": "^3.1.7",
     "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "vite": "^3.0.0",
+    "vitest": "^0.20.3"
   }
 }

src/Components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '../../utils/test-utils';
+import Sidebar from './Sidebar';
+
+describe('Sidebar test', () => {
+  test('Start empty', () => {
+    render(
+      <Sidebar
+        componentOptions={[]}
+        isOpen={true}
+        onClick={() => {}}
+        buttonOnClick={() => {}}
+      />
+    );
+
+    expect(screen.getByText(/Components/i)).toBeDefined();
+  });
+});

src/test/setup.ts

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

src/utils/test-utils.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable import/export */
+import * as React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
+const customRender = (ui: React.ReactElement, options = {}) =>
+  render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options
+  });
+
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+// override render export
+export { customRender as render };

tsconfig.json

@@ -3,8 +3,8 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": true,
-    "skipLibCheck": true,
+    "allowJs": false,
+    "skipLibCheck": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,

vite.config.ts

@@ -1,7 +1,18 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: false
+  }
 });