Visual Studio의 유닛 테스트 JavaScript 및 TypeScript

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

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

• Mocha(mochajs.org)
• Jasmine(Jasmine.github.io)
• Tape(github.com/substack/tape)
• Jest(jestjs.io)

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

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

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

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

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

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

유닛 테스트 추가(.esproj)

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

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

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

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

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

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

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

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

   • jest
   • jest-editor-support

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

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

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

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

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

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

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

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

   

   참고 항목

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

테스트 실행(.esproj)

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

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

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

참고 항목

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

참고 항목

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

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 Core Model-View-Controller 프로젝트를 만듭니다.

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

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

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

   • Microsoft.TypeScript.MSBuild
   • Npm
   • Microsoft.JavaScript.UnitTest

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

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

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

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

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

   Jest

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

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

   Mocha

   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로 컴파일하려면 exclude 섹션에서 테스트 폴더를 제거하세요.

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

   Mocha

   {
     "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

   • mocha
   • assert
   • @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에서 scripts 섹션 끝에 test 섹션을 추가합니다.

    Jest

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

    Mocha

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

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

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

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

    Jest

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

    Mocha

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

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

    

    참고 항목

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

테스트 실행(ASP.NET Core)

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

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

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

참고 항목

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

참고 항목

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