feat(testing): add vitest (#13129)

docs/generated/packages/vite.json

@@ -155,7 +155,8 @@
           "configFile": {
             "type": "string",
             "description": "The name of the Vite.js configuration file.",
-            "x-completion-type": "file"
+            "x-completion-type": "file",
+            "x-completion-glob": "vite.config.@(js|ts)"
           },
           "assets": {
             "type": "array",
@@ -262,6 +263,69 @@
       "aliases": [],
       "hidden": false,
       "path": "/packages/vite/src/executors/build/schema.json"
+    },
+    {
+      "name": "test",
+      "implementation": "/packages/vite/src/executors/test/vitest.impl.ts",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "version": 2,
+        "cli": "nx",
+        "title": "Vitest executor",
+        "description": "Test using Vitest.",
+        "type": "object",
+        "properties": {
+          "config": {
+            "type": "string",
+            "description": "The path to the local vitest config",
+            "x-completion-type": "file",
+            "x-completion-glob": "@(vitest|vite).config@(.js|.ts)"
+          },
+          "passWithNoTests": {
+            "type": "boolean",
+            "default": true,
+            "description": "Pass the test even if no tests are found"
+          },
+          "testNamePattern": {
+            "type": "string",
+            "description": "Run tests with full names matching the pattern"
+          },
+          "mode": {
+            "type": "string",
+            "enum": ["test", "benchmark", "typecheck"],
+            "default": "test",
+            "description": "The mode that vitest will run on"
+          },
+          "watch": {
+            "type": "boolean",
+            "default": false,
+            "description": "Enable watch mode"
+          },
+          "reporters": {
+            "type": "array",
+            "items": { "type": "string" },
+            "description": "An array of reporters to pass to vitest"
+          },
+          "update": {
+            "type": "boolean",
+            "default": false,
+            "alias": "u",
+            "description": "Update snapshots"
+          },
+          "coverage": {
+            "type": "boolean",
+            "default": false,
+            "description": "Enable coverage report"
+          }
+        },
+        "required": [],
+        "examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"test\": {\n            \"executor\": \"@nrwl/vite:test\",\n            //...\n            //...\n            \"options\": {\n                \"config\": \"apps/my-app/vite.config.ts\"\n            }\n            //...\n        }\n    }\n}\n```\n\n```bash\nnx test my-app\n```\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Running in watch mode\" %}\nTo run testing in watch mode, you can create a new configuration within your test target, and have watch set to true. For example:\n\n```json\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"test\": {\n            \"executor\": \"@nrwl/vite:test\",\n            //...\n            //...\n            \"options\": {\n                \"config\": \"apps/my-app/vite.config.ts\"\n            },\n            \"configurations\": {\n                \"watch\": {\n                    \"watch\": true\n                }\n            }\n        }\n    }\n}\n```\n\nAnd then run `nx run my-app:test:watch`.\n\nAlternatively, you can just run the default test target with the `--watch` flag preset, like so:\n\n```bash\nnx run my-app:test --watch\n```\n\n{% /tab %}\n{% tab label=\"Updating snapshots\" %}\nWhenever a test fails because of an outdated snapshot, you can tell vitest to update them with the following:\n\n```bash\nnx run my-app:test -u\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
+        "presets": []
+      },
+      "description": "Test with Vitest",
+      "aliases": [],
+      "hidden": false,
+      "path": "/packages/vite/src/executors/test/schema.json"
     }
   ]
 }

docs/packages.json

@@ -373,7 +373,10 @@
     "packageName": "vite",
     "description": "The Nx Plugin for building and testing applications using Vite (Early Release)",
     "path": "generated/packages/vite.json",
-    "schemas": { "executors": ["dev-server", "build"], "generators": ["init"] }
+    "schemas": {
+      "executors": ["dev-server", "build", "test"],
+      "generators": ["init"]
+    }
   },
   {
     "name": "web",

e2e/vite/src/vite.test.ts

@@ -6,6 +6,7 @@ import {
   readFile,
   rmDist,
   runCLI,
+  runCLIAsync,
   runCommandUntil,
   uniq,
   updateFile,
@@ -45,6 +46,7 @@ describe('Vite Plugin', () => {
     createFile(
       `apps/${myApp}/vite.config.ts`,
       `
+    /// <reference types="vitest" />
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     import plugin from 'vite-tsconfig-paths';
@@ -57,6 +59,10 @@ describe('Vite Plugin', () => {
           projects: ['tsconfig.base.json'],
         }),
       ],
+      test: {
+        globals: true,
+        environment: 'jsdom',
+      }
     });`
     );
 
@@ -100,6 +106,7 @@ describe('Vite Plugin', () => {
     updateProjectConfig(myApp, (config) => {
       config.targets.build.executor = '@nrwl/vite:build';
       config.targets.serve.executor = '@nrwl/vite:dev-server';
+      config.targets.test.executor = '@nrwl/vite:test';
 
       config.targets.build.options = {
         outputPath: `dist/apps/${myApp}`,
@@ -109,6 +116,10 @@ describe('Vite Plugin', () => {
         buildTarget: `${myApp}:build`,
       };
 
+      config.targets.serve.options = {
+        config: `apps/${myApp}/vite.config.ts`,
+      };
+
       return config;
     });
   });
@@ -131,5 +142,10 @@ describe('Vite Plugin', () => {
     }, 200000);
   });
 
-  xit('should test applications', () => {});
+  it('should test applications', async () => {
+    const result = await runCLIAsync(`test ${myApp}`);
+    expect(result.combinedOutput).toContain(
+      `Successfully ran target test for project ${myApp}`
+    );
+  });
 });

package.json

@@ -300,6 +300,7 @@
     "strong-log-transformer": "^2.1.0",
     "tailwindcss": "3.1.8",
     "tslib": "^2.3.0",
+    "vitest": "^0.25.1",
     "weak-napi": "^2.0.2"
   },
   "resolutions": {

packages/vite/docs/test-examples.md

@@ -0,0 +1,71 @@
+`project.json`:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "test": {
+            "executor": "@nrwl/vite:test",
+            //...
+            //...
+            "options": {
+                "config": "apps/my-app/vite.config.ts"
+            }
+            //...
+        }
+    }
+}
+```
+
+```bash
+nx test my-app
+```
+
+## Examples
+
+{% tabs %}
+
+{% tab label="Running in watch mode" %}
+To run testing in watch mode, you can create a new configuration within your test target, and have watch set to true. For example:
+
+```json
+"my-app": {
+    "targets": {
+        //...
+        "test": {
+            "executor": "@nrwl/vite:test",
+            //...
+            //...
+            "options": {
+                "config": "apps/my-app/vite.config.ts"
+            },
+            "configurations": {
+                "watch": {
+                    "watch": true
+                }
+            }
+        }
+    }
+}
+```
+
+And then run `nx run my-app:test:watch`.
+
+Alternatively, you can just run the default test target with the `--watch` flag preset, like so:
+
+```bash
+nx run my-app:test --watch
+```
+
+{% /tab %}
+{% tab label="Updating snapshots" %}
+Whenever a test fails because of an outdated snapshot, you can tell vitest to update them with the following:
+
+```bash
+nx run my-app:test -u
+```
+
+{% /tab %}
+
+{% /tabs %}

packages/vite/executors.json

@@ -9,6 +9,11 @@
       "implementation": "./src/executors/build/compat",
       "schema": "./src/executors/build/schema.json",
       "description": "Build with Vite."
+    },
+    "test": {
+      "implementation": "./src/executors/test/compat",
+      "schema": "./src/executors/test/schema.json",
+      "description": "Test with Vitest"
     }
   },
   "executors": {
@@ -21,6 +26,11 @@
       "implementation": "./src/executors/build/build.impl",
       "schema": "./src/executors/build/schema.json",
       "description": "Build with Vite."
+    },
+    "test": {
+      "implementation": "./src/executors/test/vitest.impl",
+      "schema": "./src/executors/test/schema.json",
+      "description": "Test with Vitest"
     }
   }
 }

packages/vite/package.json

@@ -28,9 +28,6 @@
     "requirements": {},
     "migrations": "./migrations.json"
   },
-  "peerDependencies": {
-    "vite": "^3.2.3"
-  },
   "dependencies": {
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/workspace": "file:../workspace",
@@ -39,6 +36,10 @@
     "chalk": "4.1.0",
     "dotenv": "~10.0.0"
   },
+  "peerDependencies": {
+    "vite": "^3.2.3",
+    "vitest": "^0.25.1"
+  },
   "publishConfig": {
     "access": "public"
   },

packages/vite/src/executors/build/schema.json

@@ -35,7 +35,8 @@
     "configFile": {
       "type": "string",
       "description": "The name of the Vite.js configuration file.",
-      "x-completion-type": "file"
+      "x-completion-type": "file",
+      "x-completion-glob": "vite.config.@(js|ts)"
     },
     "assets": {
       "type": "array",

packages/vite/src/executors/test/compat.ts

@@ -0,0 +1,4 @@
+import { convertNxExecutor } from '@nrwl/devkit';
+import vitestExecutor from './vitest.impl';
+
+export default convertNxExecutor(vitestExecutor);

packages/vite/src/executors/test/schema.d.ts

@@ -0,0 +1,9 @@
+export interface VitestExecutorSchema {
+  config: string;
+  passWithNoTests: boolean;
+  testNamePattern?: string;
+  mode: 'test' | 'benchmark' | 'typecheck';
+  reporters?: string[];
+  watch: boolean;
+  update: boolean;
+}

packages/vite/src/executors/test/schema.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "version": 2,
+  "cli": "nx",
+  "title": "Vitest executor",
+  "description": "Test using Vitest.",
+  "type": "object",
+  "properties": {
+    "config": {
+      "type": "string",
+      "description": "The path to the local vitest config",
+      "x-completion-type": "file",
+      "x-completion-glob": "@(vitest|vite).config@(.js|.ts)"
+    },
+    "passWithNoTests": {
+      "type": "boolean",
+      "default": true,
+      "description": "Pass the test even if no tests are found"
+    },
+    "testNamePattern": {
+      "type": "string",
+      "description": "Run tests with full names matching the pattern"
+    },
+    "mode": {
+      "type": "string",
+      "enum": ["test", "benchmark", "typecheck"],
+      "default": "test",
+      "description": "The mode that vitest will run on"
+    },
+    "watch": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enable watch mode"
+    },
+    "reporters": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "An array of reporters to pass to vitest"
+    },
+    "update": {
+      "type": "boolean",
+      "default": false,
+      "alias": "u",
+      "description": "Update snapshots"
+    },
+    "coverage": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enable coverage report"
+    }
+  },
+  "required": [],
+  "examplesFile": "../../../docs/test-examples.md"
+}