Merge pull request #13417 from Mikejo5000/mikejo-br25

prmerger-automator[bot] · web-flow · commit b53ec90122e2 · 2024-12-09T21:23:28.000Z
Update unit testing JSTS article for Vitest
diff --git a/docs/debugger/hot-reload.md b/docs/debugger/hot-reload.md
@@ -16,7 +16,7 @@ monikerRange: '>= vs-2022'
 
 Starting in Visual Studio 2022, the Hot Reload experience in Visual Studio works for both managed .NET and native C++ apps. Regardless of the type of app you’re working on, the intention of Hot Reload is to save you as many app restarts between edits as possible, making you more productive by reducing the time you spend waiting for apps to rebuild, restart, re-navigate to the previous location where you were in the app itself, et al.
 
-We accomplish this by making it possible for you to edit your application's code files and apply the code changes immediately to the running application, also known as *Hot Reload*. Once your changes are applied, re-execute your code again by taking an action in the app itself (or through some sort of timer, etc.) and see the changes immediately; no pausing of the app through breakpoints is required!
+We improve productivity by making it possible for you to edit your application's code files and apply the code changes immediately to the running application, also known as *Hot Reload*. Once your changes are applied, re-execute your code again by taking an action in the app itself (or through some sort of timer, etc.) and see the changes immediately; no pausing of the app through breakpoints is required!
 
 ## Update running code with Hot Reload
 
@@ -34,9 +34,9 @@ To see the changes in the user interface, the code needs to be re-executed. For
 
 ## Support for .NET applications
 
-* **When using Visual Studio 2022 and starting your app with the debugger**, the basic Hot Reload experience works with most types of .NET apps and framework versions. This includes .NET Framework, .NET Core and .NET 5+ (for both C# and Visual Basic as applicable). The expectation in this scenario is that if you’re using the debugger, assume Hot Reload is available to you and give it a try!
-* **When using Visual Studio 2022 but not using the debugger** (for example, using CTRL-F5 to start the app), Hot Reload is available when targeting most types of .NET 6 apps. This means that apps not targeting .NET 6 (.NET 5 or below) don't support the "no debugger" scenario and must use the debugger to get Hot Reload support.
-* **When using Visual Studio 2022 with a .NET 6 app, most scenarios are supported**. This isn't limited to the new "no debugger" feature mentioned above. It also includes other new capabilities, such as support for hot reloading Blazor projects and, more generally, editing Razor files in any ASP.NET Core apps, and CSS Hot Reload. Using Visual Studio 2022 and apps that target .NET 6 together will give you the most powerful Hot Reload experience.
+* **When using Visual Studio 2022 and starting your app with the debugger**, the basic Hot Reload experience works with most types of .NET apps and framework versions. This support includes .NET Framework, .NET Core and .NET 5+ (for both C# and Visual Basic as applicable). The expectation in this scenario is that if you’re using the debugger, assume Hot Reload is available to you and give it a try!
+* **When using Visual Studio 2022 but not using the debugger** (for example, using CTRL-F5 to start the app), Hot Reload is available when targeting most types of .NET 6 apps. In this scenario, apps not targeting .NET 6+ (that is, they target .NET 5 or below) don't support the "no debugger" scenario and must use the debugger to get Hot Reload support.
+* **When using Visual Studio 2022 with a .NET 6+ app, most scenarios are supported**. This support isn't limited to the new "no debugger" feature mentioned above. It also includes other new capabilities, such as support for hot reloading Blazor projects and, more generally, editing Razor files in any ASP.NET Core apps, and CSS Hot Reload. Using Visual Studio 2022 and apps that target .NET 6 together gives you the most powerful Hot Reload experience.
 
 The following table shows which projects support .NET Hot Reload with the debugger attached (F5) and without the debugger attached (Ctrl+F5), according to the minimum .NET version required for support in Visual Studio 2022 (17.8).
 
@@ -54,13 +54,13 @@ The following table shows which projects support .NET Hot Reload with the debugg
 
 The [types of edits you can make](../debugger/supported-code-changes-csharp.md) with Hot Reload are determined by the runtime and compiler version, not by the method you used to start the application (F5 or Ctrl+F5).
 
-In the following sections, we’ll expand on the above summary and dive into more details.
+In the following sections, we provide additional details.
 
 ## Support for C++ applications
 
 When using Visual Studio 2022 and starting your app with the debugger, you can hot reload a native C++ application when running under the debugger (F5) using the **Hot Reload** button. Hot Reload is also supported for apps built using CMake and OpenFolder projects.
 
-In order for your project to support Hot Reload, you will need:
+For your project to support Hot Reload, you need the following options set:
 
 * Project > Properties > C/C++ > General > **Debug Information Format** must be set to "Program Database for Edit and Continue `/ZI`"
 * Project > Properties > Linker > General > **Enable Incremental Linking** must be set to "Yes `/INCREMENTAL`"
@@ -74,15 +74,15 @@ When using Visual Studio 2022 and starting the app with the debugger, Hot Reload
 Anywhere you have .NET and you’re using the Visual Studio managed debugger, you should get basic Hot Reload support. This fact means that even projects such as Azure Functions work great in this scenario.
 
 > [!NOTE]
-> Some projects use by default mixed mode debugging, which does not support Hot Reload. You can modify this in project settings, by setting **Project > Properties > Debug > Open debug launch profiles UI > Enable native code debugging** to false.
+> By default, some projects use mixed mode debugging, which does not support Hot Reload. You can modify this setting in project settings, by setting **Project > Properties > Debug > Open debug launch profiles UI > Enable native code debugging** to false.
 
 ## Visual Studio 2022 with a .NET app, but not using the debugger
 
 Hot Reload is available without the debugger when targeting most types of .NET 6+ apps.
 
-This feature is exclusive to .NET 6+. Those apps not targeting .NET 6+ (that is, .NET 5 or below) will not support the "no debugger" scenario and must use the debugger to get access to Hot Reload functionality.
+This feature is exclusive to .NET 6+. Those apps not targeting .NET 6+ (that is, they target .NET 5 or below) do not support the "no debugger" scenario and must use the debugger to get access to Hot Reload functionality.
 
-Also, be aware that not all project types currently support the "no debugger" scenario, see [Support for .NET applications](#support-for-net-applications).
+Also, not all project types currently support the "no debugger" scenario, see [Support for .NET applications](#support-for-net-applications).
 
 ## Visual Studio 2022 with a .NET 6+ app
 
diff --git a/docs/javascript/unit-testing-javascript-with-visual-studio.md b/docs/javascript/unit-testing-javascript-with-visual-studio.md
@@ -1,7 +1,7 @@
 ---
 title: "Unit testing JavaScript and TypeScript"
 description: Explore unit testing support in Visual Studio for JavaScript and TypeScript code by using the Node.js Tools for Visual Studio.
-ms.date: "11/16/2023"
+ms.date: "12/06/2024"
 ms.topic: "how-to"
 ms.devlang: javascript
 author: "mikejo5000"
@@ -15,11 +15,22 @@ dev_langs:
 
 You can write and run unit tests in Visual Studio using some of the more popular JavaScript frameworks without the need to switch to a command prompt. Both Node.js and ASP.NET Core projects are supported.
 
+::: moniker range=">=vs-2022"
+The supported frameworks are:
+- Mocha ([mochajs.org](https://mochajs.org/))
+- Jasmine ([Jasmine.github.io](https://jasmine.github.io/))
+- Tape ([github.com/substack/tape](https://github.com/substack/tape))
+- Jest ([jestjs.io](https://jestjs.io/))
+- Vitest ([vitest.dev](https://vitest.dev/))
+::: moniker-end
+
+::: moniker range="<=vs-2019"
 The supported frameworks are:
 - Mocha ([mochajs.org](https://mochajs.org/))
 - Jasmine ([Jasmine.github.io](https://jasmine.github.io/))
 - Tape ([github.com/substack/tape](https://github.com/substack/tape))
 - Jest ([jestjs.io](https://jestjs.io/))
+::: moniker-end
 
 ::: moniker range="<=vs-2019"
 If your favorite framework is not supported, see [Add support for a unit test framework](#addingFramework) for information on adding support.
@@ -28,12 +39,13 @@ If your favorite framework is not supported, see [Add support for a unit test fr
 ::: moniker range=">=vs-2022"
 ## Write unit tests for a CLI-based project (.esproj)
 
-The [CLI-based projects](../javascript/javascript-in-vs-2022.md#project-templates) supported in Visual Studio 2022 work with Test Explorer. Jest is the built-in test framework for React and Vue projects, and Karma and Jasmine is used for Angular projects. By default, you will be able to run the default tests provided by each framework, as well as any additional tests you write.  Just hit the **Run** button in Test Explorer. If you don’t already have Test Explorer open, you can find it by selecting **Test** > **Test Explorer** in the menu bar.
+The [CLI-based projects](../javascript/javascript-in-vs-2022.md#project-templates) supported in Visual Studio 2022 work with Test Explorer. Vitest is the built-in test framework for React and Vue projects (previously Jest), and Karma and Jasmine is used for Angular projects. By default, you will be able to run the default tests provided by each framework, as well as any additional tests you write.  Just hit the **Run** button in Test Explorer. If you don’t already have Test Explorer open, you can find it by selecting **Test** > **Test Explorer** in the menu bar.
 
 To run unit tests from the command-line, right-click the project in Solution Explorer, choose **Open in Terminal**, and run the command specific to the test type.
 
 For information on setting up unit tests, see the following:
 
+- [Testing with Vitest](https://vitest.dev/guide/)
 - [Testing React with Jest](https://jestjs.io/docs/tutorial-react)
 - [Angular testing](https://angular.io/guide/testing)
 - [Testing Vue.js](https://vuejs.org/guide/scaling-up/testing.html#unit-testing)
@@ -42,7 +54,7 @@ A simple example is also provided here. However, use the preceding links for com
 
 ### Add a unit test (.esproj)
 
-The following example is based on the TypeScript React project template provided in Visual Studio 2022 version 17.8 or later, which is the **Standalone TypeScript React Project** template. For Vue and Angular, the steps are similar.
+The following example is based on the TypeScript React project template provided in Visual Studio 2022 version 17.12 or later, which is the **Standalone TypeScript React Project** template. For Vue and Angular, the steps are similar.
 
 1. In Solution Explorer, right-click the React project and choose **Edit Project File**.
 
@@ -51,29 +63,31 @@ The following example is based on the TypeScript React project template provided
    ```xml
    <PropertyGroup>
      <JavaScriptTestRoot>src\</JavaScriptTestRoot>
-     <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
+     <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
    </PropertyGroup> 
    ```
 
-   This example specifies Jest as the test framework. You could specify Mocha, Tape, or Jasmine instead.
+   This example specifies Vitest as the test framework. You could specify Mocha, Tape, Jasmine, or Jest instead.
 
-   The `JavaScriptTestRoot` element specifies that your unit tests will be in the *src* folder of the project root.
+   The `JavaScriptTestRoot` element specifies that your unit tests will be in the *src* folder of the project root. It's also common to specify the *test* folder.
 
-1. In Solution Explorer, right-click the npm node and choose **Install new npm packages**.
+1. In Solution Explorer, right-click the **npm** node and choose **Install new npm packages**.
 
    Use the npm package installation dialog to install the following npm packages:
 
-   - jest
-   - jest-editor-support
+   - vitest
 
-   These packages are added to the *package.json* file under dependencies.
+   This package are added to the *package.json* file under dependencies.
+
+   > [!NOTE]
+   > If you're using jest, the jest-editor-support npm package is required as well as the jest package.
 
 1. In *package.json*, add the `test` section at the end of the `scripts` section:
 
    ```json
    "scripts": {
       ...
-      "test": "jest"
+      "test": "vitest"
    },
    ```
 
@@ -84,6 +98,8 @@ The following example is based on the TypeScript React project template provided
 1. Add the following code to *App.test.tsx*.
 
    ```javascript
+   import { describe, it, expect } from 'vitest';
+
    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
