Visual Studio에서 JavaScript 및 TypeScript 단위 테스트

명령 프롬프트로 전환할 필요 없이 인기 있는 JavaScript 프레임워크 중 일부를 사용하여 Visual Studio에서 단위 테스트를 작성하고 실행할 수 있습니다. Node.js 및 ASP.NET Core 프로젝트가 모두 지원됩니다.

지원되는 프레임워크는 다음과 같습니다.

• 모차(mochajs.org)
• 재스민 (Jasmine.github.io)
• 테이프(github.com/substack/tape)
• Jest(jestjs.io)
• Vitest(vitest.dev)

CLI 기반 프로젝트에 대한 단위 테스트 작성(.esproj)

Visual Studio 2022에서 지원되는 CLI 기반 프로젝트는 테스트 탐색기에서 작동합니다. Vitest는 React 및 Vue 프로젝트(이전의 Jest)에 대한 기본 제공 테스트 프레임워크이며, Karma 및 Jasmine은 Angular 프로젝트에 사용됩니다. 기본적으로 각 프레임워크에서 제공하는 기본 테스트와 작성하는 추가 테스트를 실행할 수 있습니다. 테스트 탐색기에서 실행 단추를 누릅니다. 테스트 탐색기가 아직 열려 있지 않은 경우 메뉴 모음에서 테스트>테스트 탐색기를 선택하여 찾을 수 있습니다.

명령줄에서 단위 테스트를 실행하려면 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 터미널에서 열기를 선택한 다음 테스트 유형과 관련된 명령을 실행합니다.

단위 테스트 설정에 대한 자세한 내용은 다음을 참조하세요.

• Vitest를 사용하여 테스트
• Jest를 사용하여 React 테스트
• Angular 테스트
• 테스트 Vue.js

간단한 예제도 여기에 제공됩니다. 그러나 전체 정보는 위의 링크를 사용합니다.

단위 테스트 추가(.esproj)

다음 예제는 독립 실행형 TypeScript React 프로젝트 템플릿인 Visual Studio 2022 버전 17.12 이상에서 제공되는 TypeScript React 프로젝트 템플릿을 기반으로 합니다. Vue 및 Angular의 경우 단계는 비슷합니다.

1. 솔루션 탐색기에서 React 프로젝트를 마우스 오른쪽 단추로 클릭하고 프로젝트 파일 편집을 선택합니다.

2. 값이 표시된 .esproj 파일에 다음 속성이 있는지 확인합니다.

   <PropertyGroup>
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
   </PropertyGroup> 
   

   이 예제에서는 테스트 프레임워크로 Vitest를 지정합니다. 대신 모카, 테이프, 재스민 또는 제스트를 지정할 수 있습니다.

   요소는 JavaScriptTestRoot 단위 테스트가 프로젝트 루트 의 src 폴더에 있도록 지정합니다. 테스트 폴더를 지정하는 것도 일반적입니다.

3. 솔루션 탐색기에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 새 npm 패키지 설치를 선택합니다.

   npm 패키지 설치 대화 상자를 사용하여 다음 npm 패키지를 설치합니다.

   • vitest

   이 패키지는 종속성에서 package.json 파일에 추가됩니다.

   비고

   jest를 사용하는 경우 jest-editor-support npm 패키지와 jest 패키지가 필요합니다.

4. package.json섹션의 끝에 섹션을 추가 test 합니다scripts.

   "scripts": {
      ...
      "test": "vitest"
   },
   

5. 솔루션 탐색기에서 src 폴더를 마우스 오른쪽 단추로 클릭하고새 항목>를 선택한 다음 App.test.tsx라는 새 파일을 추가합니다.

   그러면 src 폴더 아래에 새 파일이 추가되었습니다.

6. App.test.tsx에 다음 코드를 추가합니다.

   import { describe, it, expect } from 'vitest';
   
   describe('testAsuite', () => {
      it('testA1', async () => {
         expect(2).toBe(2);
      });
   });
   

7. 테스트 탐색기를 열고( 테스트>탐색기 선택) Visual Studio에서 테스트를 검색하고 표시합니다. 테스트가 처음에 표시되지 않는 경우 프로젝트를 다시 빌드하여 목록을 새로 고칩니다.

   

   비고

   TypeScript의 경우 테스트 탐색기가 단위 테스트를 찾을 수 없으므로 outfile옵션을 사용하지 마세요. 이 outdir 옵션을 사용할 수 있지만 프로젝트 루트와 package.json 같은 tsconfig.json 구성 파일이 있는지 확인할 수 있습니다.

   중요합니다

   테스트 검색 중에 출력 창의 테스트 출력에 오류가 표시되는 ReadOnlySpan 경우 알려진 MSBuild 문제에 대해 다음 해결 방법을 사용합니다. Visual Studio 2022의 경우 Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform 폴더를 열고 System.Memory.dll 이름을 다른 이름으로 바꿉니다. 이 수정을 통해 테스트 검색을 수행할 수 있습니다.

테스트 실행(.esproj)

테스트 탐색기에서 모두 실행 링크를 클릭하여 테스트를 실행할 수 있습니다. 또는 하나 이상의 테스트 또는 그룹을 선택하고, 마우스 오른쪽 단추를 클릭하고, 바로 가기 메뉴에서 실행을 선택하여 테스트를 실행할 수 있습니다. 테스트는 백그라운드에서 실행되고 테스트 탐색기는 자동으로 업데이트되고 결과를 표시합니다. 또한 마우스 오른쪽 단추를 클릭하고 디버그를 선택하여 선택한 테스트를 디버그할 수도 있습니다.

다음 그림에서는 두 번째 단위 테스트가 추가된 예제를 보여 줍니다.

일부 단위 테스트 프레임워크의 경우 일반적으로 생성된 JavaScript 코드에 대해 단위 테스트가 실행됩니다.

비고

대부분의 TypeScript 시나리오에서는 TypeScript 코드에서 중단점을 설정하고 테스트 탐색기에서 테스트를 마우스 오른쪽 단추로 클릭하고 디버그를 선택하여 단위 테스트를 디버그할 수 있습니다. 원본 맵을 사용하는 일부 시나리오와 같은 더 복잡한 시나리오에서는 TypeScript 코드에서 중단점을 타격하는 데 어려움이 있을 수 있습니다. 해결 방법으로 키워드를 debugger 사용해 보세요.

비고

프로파일링 테스트 및 코드 검사는 현재 지원되지 않습니다.

CLI 기반 프로젝트(.esproj)에 대한 명령줄에서 단위 테스트 실행

Visual Studio를 사용하지 않은 경우와 동일한 방식으로 단위 테스트 프레임워크의 명령줄에서 직접 단위 테스트를 실행할 수 있습니다.

vstest.console을 사용하여 명령줄에서 테스트를 실행하도록 선택할 수도 있습니다. 예를 들어 vstest.console을 사용하여 C# 단위 테스트와의 일관성을 유지하거나 Azure DevOps에서 실행할 수 있습니다. 다음 명령을 사용하고 MyProj를 프로젝트 이름으로 바꾸십시오.

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

ASP.NET Core에 대한 단위 테스트 작성

ASP.NET Core 프로젝트에서 JavaScript 및 TypeScript의 단위 테스트에 대한 지원을 추가하려면 필요한 NuGet 패키지를 포함하여 TypeScript, npm 및 단위 테스트 지원을 프로젝트에 추가해야 합니다.

단위 테스트 추가(ASP.NET Core)

다음 예제는 ASP.NET Core Model-View-Controller 프로젝트 템플릿을 기반으로 하며 Jest 또는 Mocha 단위 테스트 추가를 포함합니다.

1. ASP.NET 핵심 모델View-Controller 프로젝트를 만듭니다.

   예제 프로젝트는 기존 ASP.NET Core 앱에 TypeScript 추가를 참조하세요. 단위 테스트 지원을 위해 표준 ASP.NET Core 프로젝트 템플릿으로 시작하는 것이 좋습니다.

2. 솔루션 탐색기(오른쪽 창)에서 ASP.NET Core 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 솔루션용 NuGet 패키지 관리를 선택합니다.

3. 찾아보기 탭에서 다음 패키지를 검색하고 각각을 설치합니다.

   • Microsoft.TypeScript.MSBuild
   • Npm

   NuGet 패키지를 사용하여 npm TypeScript 패키지 대신 TypeScript 지원을 추가합니다.

4. 솔루션 탐색기에서 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 프로젝트 파일 편집을 선택합니다.

   .csproj 파일이 Visual Studio에서 열립니다.

5. 요소의 .csproj 파일에 PropertyGroup 다음 요소를 추가합니다.

   이 예제에서는 Jest 또는 Mocha를 테스트 프레임워크로 지정합니다. 대신 테이프 또는 재스민을 지정할 수 있습니다.

   Jest

   요소는 JavaScriptTestRoot 단위 테스트가 프로젝트 루트의 테스트 폴더에 있도록 지정 합니다 .

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

   모카

   요소는 JavaScriptTestRoot 단위 테스트의 위치를 지정합니다. Mocha에 대한 구성을 간소화하기 위해 이 예제에서는 테스트 루트를 출력 폴더 wwwroot\js\tests\로 가리킵니다.

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

6. 솔루션 탐색기에서 ASP.NET Core 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 새 항목 추가>를 선택합니다. TypeScript JSON 구성 파일선택한 다음 추가를 선택합니다.

   모든 항목 템플릿이 표시되지 않으면 모든 템플릿 표시를 선택한 다음 항목 템플릿을 선택합니다.

   Visual Studio는 프로젝트 루트에 tsconfig.json 파일을 추가합니다. 이 파일을 사용하여 TypeScript 컴파일러에 대한 옵션을 구성할 수 있습니다.

7. tsconfig.json 열고 기본 코드를 다음 코드로 바꿉다.

   Jest

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
       "scripts/**/*"
     ],
     "exclude": [
      "node_modules",
      "tests"
     ]
   }
   

   Jest의 경우 TypeScript 테스트를 JavaScript로 컴파일하려면 제외 섹션에서 테스트 폴더를 제거합니다.

   스크립트 폴더는 앱에 대한 TypeScript 코드를 넣을 수 있는 위치입니다. 코드를 추가하는 예제 프로젝트는 기존 ASP.NET Core 앱에 TypeScript 추가를 참조하세요.

   모카

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
        "scripts/**/*",
        "tests/**/*"
     ],
     "exclude": [
        "node_modules"
     ]
   }
   

   스크립트 폴더는 앱에 대한 TypeScript 코드를 넣을 수 있는 위치입니다. 코드를 추가하는 예제 프로젝트는 기존 ASP.NET Core 앱에 TypeScript 추가를 참조하세요.

8. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고새 항목>를 선택하거나 Ctrl + Shift + A를 누릅니다. 검색 상자를 사용하여 npm 파일을 찾고, npm 구성 파일을 선택하고, 기본 이름을 사용하고, 추가를 클릭합니다.

   package.json 파일이 프로젝트 루트에 추가됩니다.

9. 솔루션 탐색기에서 종속성에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 새 npm 패키지 설치를 선택합니다.

   비고

   일부 시나리오에서 솔루션 탐색기는 여기에 설명된 알려진 문제로 인해 npm 노드를 표시하지 않을 수 있습니다. npm 노드가 표시되어야 하는 경우 프로젝트를 언로드(프로젝트를 마우스 오른쪽 단추로 클릭하고 프로젝트 언로드 선택)한 다음 프로젝트를 다시 로드하여 npm 노드가 다시 표시되도록 할 수 있습니다. 또는 프로젝트를 빌드하여 package.json 설치할 패키지 항목을 추가할 수 있습니다.

   npm 패키지 설치 대화 상자를 사용하여 다음 npm 패키지를 설치합니다.

   Jest

   • jest
   • jest-editor-support
   • @types/jest

   이러한 패키지는 devDependencies의 package.json 파일에 추가됩니다.

    "@types/jest": "^29.5.8",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2"
   

   모카

   • mocha
   • 주장하다
   • @types/mocha
   • @types/node

   이러한 패키지는 devDependencies의 package.json 파일에 추가됩니다.

    "@types/mocha": "^10.0.5",
    "@types/node": "^20.9.2",
    "assert": "^2.1.0",
    "mocha": "^10.2.0"
   

10. package.json섹션의 끝에 섹션을 추가 test 합니다scripts.

    Jest

    "scripts": {
       ...
       "test": "jest"
    },
    

    모카

    "scripts": {
       ...
       "test": "mocha"
    },
    

11. 솔루션 탐색기에서 테스트 폴더를 마우스 오른쪽 단추로 클릭하고새 항목>를 선택한 다음 App.test.tsx라는 새 파일을 추가합니다.

    그러면 테스트 폴더 아래에 새 파일이 추가되었습니다.

12. App.test.tsx에 다음 코드를 추가합니다.

    Jest

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    

    모카

    var assert = require('assert');
    
    describe('testAsuite', function () {
       it('testA1', function () {
          assert.equal(1, 1);
       })
    })
    

13. 테스트 탐색기를 열고( 테스트>Windows>테스트 탐색기 선택) Visual Studio에서 테스트를 검색하고 표시합니다. 테스트가 처음에 표시되지 않는 경우 프로젝트를 다시 빌드하여 목록을 새로 고칩니다. 다음 그림에서는 두 개의 서로 다른 단위 테스트 파일이 있는 Jest 예제를 보여 줍니다.

    

    비고

    TypeScript의 경우 테스트 탐색기가 단위 테스트를 찾을 수 없으므로 outfile옵션을 사용하지 마세요. 이 outdir 옵션을 사용할 수 있지만 프로젝트 루트와 package.json 같은 tsconfig.json 구성 파일이 있는지 확인할 수 있습니다.

테스트 실행(ASP.NET Core)

테스트 탐색기에서 모두 실행 링크를 클릭하여 테스트를 실행할 수 있습니다. 또는 하나 이상의 테스트 또는 그룹을 선택하고, 마우스 오른쪽 단추를 클릭하고, 바로 가기 메뉴에서 실행을 선택하여 테스트를 실행할 수 있습니다. 테스트는 백그라운드에서 실행되고 테스트 탐색기는 자동으로 업데이트되고 결과를 표시합니다. 또한 마우스 오른쪽 단추를 클릭하고 디버그를 선택하여 선택한 테스트를 디버그할 수도 있습니다.

다음 그림에서는 두 번째 단위 테스트가 추가된 Jest 예제를 보여 줍니다.

일부 단위 테스트 프레임워크의 경우 일반적으로 생성된 JavaScript 코드에 대해 단위 테스트가 실행됩니다.

비고

대부분의 TypeScript 시나리오에서는 TypeScript 코드에서 중단점을 설정하고 테스트 탐색기에서 테스트를 마우스 오른쪽 단추로 클릭하고 디버그를 선택하여 단위 테스트를 디버그할 수 있습니다. 원본 맵을 사용하는 일부 시나리오와 같은 더 복잡한 시나리오에서는 TypeScript 코드에서 중단점을 타격하는 데 어려움이 있을 수 있습니다. 해결 방법으로 키워드를 debugger 사용해 보세요.

비고

프로파일링 테스트 및 코드 검사는 현재 지원되지 않습니다.