Add vitest-preview package and document usage (#10481)

.gitignore

@@ -141,4 +141,7 @@ packages/manager/bundle_analyzer_report.html
 **/manager/src/dev-tools/*.local.*
 
 # vitepress
-docs/.vitepress/cache
+docs/.vitepress/cache
+
+# vitest-preview
+.vitest-preview

docs/development-guide/08-testing.md

@@ -43,6 +43,29 @@ yarn workspace linode-manager run test:debug
 
 Test execution will stop at the debugger statement, and you will be able to use Chrome's normal debugger to step through the tests (open `chrome://inspect/#devices` in Chrome).
 
+### Visual debugging
+
+Using `vite-preview`, you can view a preview of the tested component in the browser.
+
+First, add the following lines to your test:
+
+```
+import { debug } from 'vitest-preview';
+
+// Inside your tests
+describe('my test', () => {
+  render(<MyComponent />);
+  debug(); // 👈 Add this line
+}
+```
+
+Start the `vitest-preview` server:
+```
+yarn vitest-preview
+```
+
+Finally, run the test to view the component in the browser.
+
 ### React Testing Library
 
 This library provides a set of tools to render React components from within the Vitest environment. The library's philosophy is that components should be tested as closely as possible to how they are used.

package.json

@@ -33,6 +33,7 @@
     "start:manager:ci": "yarn workspace linode-manager start:ci",
     "clean": "rm -rf node_modules && rm -rf packages/@linode/api-v4/node_modules && rm -rf packages/manager/node_modules && rm -rf packages/@linode/validation/node_modules",
     "test": "yarn workspace linode-manager test",
+    "vitest-preview": "yarn workspace linode-manager vitest-preview",
     "package-versions": "node ./scripts/package-versions/index.js",
     "storybook": "yarn workspace linode-manager storybook",
     "cy:run": "yarn workspace linode-manager cy:run",

packages/manager/package.json

@@ -94,6 +94,7 @@
     "precommit": "lint-staged && yarn typecheck",
     "test": "vitest run",
     "test:debug": "node --inspect-brk scripts/test.js --runInBand",
+    "vitest-preview": "vitest-preview",
     "storybook": "storybook dev -p 6006",
     "storybook-static": "storybook build -c .storybook -o .out",
     "build-storybook": "storybook build",
@@ -212,7 +213,8 @@
     "ts-node": "^10.9.2",
     "vite": "^5.1.7",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.0",
+    "vitest-preview": "^0.0.1"
   },
   "browserslist": [
     ">1%",

packages/manager/vite.config.ts

@@ -1,7 +1,6 @@
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
 import { defineConfig } from 'vitest/config';
-import { URL } from 'url';
 
 // ESM-friendly alternative to `__dirname`.
 const DIRNAME = new URL('.', import.meta.url).pathname;
@@ -11,6 +10,11 @@ export default defineConfig({
     outDir: 'build',
   },
   envPrefix: 'REACT_APP_',
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'es5',
+    },
+  },
   plugins: [react(), svgr({ exportAsDefault: true })],
   resolve: {
     alias: {
@@ -35,6 +39,7 @@ export default defineConfig({
         'src/**/*.utils.{js,jsx,ts,tsx}',
       ],
     },
+    css: true,
     environment: 'jsdom',
     globals: true,
     setupFiles: './src/testSetup.ts',