Configure vitest library with react testing library and jest-dom

.eslintrc.cjs

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

package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "coverage": "vitest run coverage"
   },
   "dependencies": {
@@ -17,6 +18,10 @@
     "react-svg-pan-zoom": "^3.11.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@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",
@@ -30,6 +35,7 @@
     "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",

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
+  }
 });

vitest.config.ts

@@ -1,7 +0,0 @@
-import { configDefaults, defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    exclude: [...configDefaults.exclude, 'packages/template/*'],
-  },
-})