Visual Studio'da JavaScript ve TypeScript'i birim testi

Komut istemine geçiş yapmanıza gerek kalmadan daha popüler JavaScript çerçevelerinden bazılarını kullanarak Visual Studio'da birim testleri yazabilir ve çalıştırabilirsiniz. Hem Node.js hem de ASP.NET Core projeleri desteklenir.

Desteklenen çerçeveler şunlardır:

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Bant (github.com/substack/tape)
• Jest (jestjs.io)
• Vitest (vitest.dev)

CLI tabanlı proje (.esproj) için birim testleri yazma

Visual Studio 2022'de desteklenen CLI tabanlı projeler Test Gezgini ile çalışır. Vitest React ve Vue projeleri (daha önce Jest) için yerleşik test çerçevesidir ve Angular projeleri için Karma ve Jasmine kullanılır. Varsayılan olarak, her çerçeve tarafından sağlanan varsayılan testleri ve yazdığınız ek testleri çalıştırabilirsiniz. Test Gezgini'nde Çalıştır düğmesine basmanız yeterlidir. Test Gezgini'ni henüz açmadıysanız menü çubuğunda Test>Test Gezgini'ni seçerek bulabilirsiniz.

Komut satırından birim testleri çalıştırmak için Çözüm Gezgini'nde projeye sağ tıklayın, Terminalde Aç'ı seçin ve test türüne özgü komutu çalıştırın.

Birim testlerini ayarlama hakkında bilgi için aşağıdakilere bakın:

• Vitest ile test etme
• Jest ile React'i Test Etme
• Angular testi
• Test Vue.js

Burada basit bir örnek de verilmiştir. Ancak, tam bilgi için önceki bağlantıları kullanın.

Birim testi (.esproj) ekleme

Aşağıdaki örnek, Tek Başına TypeScript React Projesi şablonu olan Visual Studio 2022 sürüm 17.12 veya sonraki sürümlerde sağlanan TypeScript React proje şablonunu temel alır. Vue ve Angular için adımlar benzerdir.

1. Çözüm Gezgini'nde React projesine sağ tıklayın ve Proje Dosyasını Düzenle'yi seçin.

2. .esproj dosyasında gösterilen değerlerle aşağıdaki özelliklerin bulunduğundan emin olun.

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

   Bu örnek, test çerçevesi olarak Vitest'i belirtir. Bunun yerine Mocha, Bant, Yasemin veya Jest belirtebilirsiniz.

   öğesi, JavaScriptTestRoot birim testlerinizin proje kökünün src klasöründe olacağını belirtir. Test klasörünü belirtmek de yaygındır.

3. Çözüm Gezgini'nde npm düğümüne sağ tıklayın ve Yeni npm paketlerini yükle'yi seçin.

   Aşağıdaki npm paketlerini yüklemek için npm paketi yükleme iletişim kutusunu kullanın:

   • vitest

   Bu paket, bağımlılıklar altındaki package.json dosyasına eklenir.

   Uyarı

   Jest kullanıyorsanız jest paketine ek olarak jest-editor-support npm paketi de gereklidir.

4. package.jsonbölümünde, bölümün test sonuna bölümünü ekleyinscripts:

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

5. Çözüm Gezgini'nde src klasörüne sağ tıklayın veYeni Öğe> seçin ve ardından App.test.tsx adlı yeni bir dosya ekleyin.

   Bu, yeni dosyayı src klasörünün altına ekler.

6. App.test.tsx'e aşağıdaki kodu ekleyin.

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

7. Test Gezgini'ni açın ( Test Test>Gezgini'ni seçin) ve Visual Studio testleri bulur ve görüntüler. Testler başlangıçta gösterilmiyorsa, listeyi yenilemek için projeyi yeniden derleyin.

   

   Uyarı

   Test Gezgini birim testlerinizi bulamayacağından TypeScript için outfileseçeneğini kullanmayın. seçeneğini kullanabilirsinizoutdir, ancak ve package.json gibi tsconfig.json yapılandırma dosyalarının proje kökünde olduğundan emin olun.

   Önemli

   Çıkış penceresindeki Testler'den elde edilen çıkış, test bulma sırasında bir ReadOnlySpan hata gösteriyorsa, bilinen bir MSBuild sorunu için aşağıdaki geçici çözümü kullanın. Visual Studio 2022 için Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform klasörünü açın ve System.Memory.dll farklı bir adla yeniden adlandırın. Bu düzeltme, test bulmayı etkinleştirir.

Testleri çalıştırma (.esproj)

Test Gezgini'nde Tümünü Çalıştır bağlantısına tıklayarak testleri çalıştırabilirsiniz. Alternatif olarak, bir veya daha fazla test veya grup seçerek, sağ tıklayarak ve kısayol menüsünden Çalıştır'ı seçerek testleri çalıştırabilirsiniz. Testler arka planda çalışır ve Test Gezgini otomatik olarak güncelleştirilir ve sonuçları gösterir. Ayrıca, sağ tıklayıp Hata Ayıkla'yı seçerek de seçili testlerde hata ayıklayabilirsiniz.

Aşağıdaki çizimde ikinci bir birim testinin eklendiği örnek gösterilmektedir.

Bazı birim testi çerçeveleri için birim testleri genellikle oluşturulan JavaScript koduna karşı çalıştırılır.

Uyarı

Çoğu TypeScript senaryosunda, TypeScript kodunda bir kesme noktası ayarlayarak, Test Gezgini'nde bir teste sağ tıklayarak ve Hata Ayıkla'yı seçerek birim testinde hata ayıklayabilirsiniz. Kaynak eşlemeleri kullanan bazı senaryolar gibi daha karmaşık senaryolarda, TypeScript kodunda kesme noktalarına isabet etmekte zorlanabilirsiniz. Geçici bir çözüm olarak anahtar sözcüğünü debugger kullanmayı deneyin.

Uyarı

Profil oluşturma testleri ve kod kapsamı şu anda desteklenmiyor.

CLI tabanlı bir proje (.esproj) için komut satırından birim testleri çalıştırma

Birim testlerini doğrudan birim test çerçevenizin komut satırından Visual Studio'yu kullanmadığınız gibi çalıştırabilirsiniz.

Testleri vstest.console kullanarak komut satırından çalıştırmayı da seçebilirsiniz. Örneğin, C# birim testleriyle tutarlılığı korumak veya Azure DevOps'ta çalıştırmak için vstest.console'u kullanmak isteyebilirsiniz. Aşağıdaki komutu kullanın, ancak değerini projenizin adıyla değiştirin MyProj .

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

ASP.NET Core için birim testleri yazma

ASP.NET Core projesinde JavaScript ve TypeScript'in birim testi için destek eklemek için, gerekli NuGet paketlerini ekleyerek projeye TypeScript, npm ve birim testi desteği eklemeniz gerekir.

Birim testi ekleme (ASP.NET Çekirdek)

Aşağıdaki örnek, ASP.NET Core Model-View-Controller proje şablonunu temel alır ve Jest veya Mocha birim testi eklemeyi içerir.

1. ASP.NET Core Model-View-Controller projesi oluşturun.

   Örnek bir proje için bkz. Mevcut ASP.NET Core uygulamasına TypeScript ekleme. Birim testi desteği için standart ASP.NET Core proje şablonuyla başlamanızı öneririz.

2. Çözüm Gezgini'nde (sağ bölme), ASP.NET Core proje düğümüne sağ tıklayın ve Çözümler için NuGet Paketlerini Yönet'i seçin.

3. Gözat sekmesinde aşağıdaki paketleri arayın ve her birini yükleyin:

   • Microsoft.TypeScript.MSBuild
   • Npm

   NuGet paketini kullanarak npm TypeScript paketi yerine TypeScript desteği ekleyin.

4. Çözüm Gezgini'nde proje düğümüne sağ tıklayın ve Proje Dosyasını Düzenle'yi seçin.

   .csproj dosyası Visual Studio'da açılır.

5. öğesindeki .csproj dosyasına PropertyGroup aşağıdaki öğeleri ekleyin.

   Bu örnekte test çerçevesi olarak Jest veya Mocha belirtildi. Bunun yerine Bant veya Yasemin belirtebilirsiniz.

   Jest

   öğesi, JavaScriptTestRoot birim testlerinizin proje kökünün testler klasöründe olacağını belirtir.

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

   Mocha

   öğesi, JavaScriptTestRoot birim testlerinizin konumunu belirtir. Mocha yapılandırmasını basitleştirmek için, bu örnekte test kökünü wwwroot\js\tests\ çıkış klasörüne işaret ediyoruz.

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

6. Çözüm Gezgini'nde ASP.NET Core proje düğümüne sağ tıklayın ve Yeni Öğe Ekle'yi >seçin. TypeScript JSON Yapılandırma Dosyasıseçin ve ardından Ekleseçin.

   Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Gösteröğesini ve ardından öğe şablonunu seçin.

   Visual Studio, tsconfig.json dosyasını proje köküne ekler. TypeScript derleyicisi için seçenekleri yapılandırmak üzere bu dosyayı kullanabilirsiniz.

7. tsconfig.json açın ve varsayılan kodu aşağıdaki kodla değiştirin:

   Jest

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

   Jest için, TypeScript testlerini JavaScript'e derlemek istiyorsanız testler klasörünüdışlama bölümünden kaldırın.

   Betikler klasörü, uygulamanız için TypeScript kodunu yerleştirebileceğiniz yerdir. Kod ekleyen örnek bir proje için bkz. Mevcut ASP.NET Core uygulamasına TypeScript ekleme.

   Mocha

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

   Betikler klasörü, uygulamanız için TypeScript kodunu yerleştirebileceğiniz yerdir. Kod ekleyen örnek bir proje için bkz. Mevcut ASP.NET Core uygulamasına TypeScript ekleme.

8. Çözüm Gezgini'nde projeye sağ tıklayın veYeni Öğe Ekle'yi> seçin (veya Ctrl + SHIFTA + basın). npm dosyasını bulmak için arama kutusunu kullanın, npm Yapılandırma Dosyası seçin, varsayılan adı kullanın ve Ekletıklayın.

   Proje köküne birpackage.json dosyası eklenir.

9. Çözüm Gezgini'nde Bağımlılıklar'ın altındaki npm düğümüne sağ tıklayın ve Yeni npm paketlerini yükle'yi seçin.

   Uyarı

   Bazı senaryolarda, burada açıklanan bilinen bir sorun nedeniyle Çözüm Gezgini npm düğümünü göstermeyebilir. npm düğümünü görmeniz gerekiyorsa, projeyi kaldırabilirsiniz (projeye sağ tıklayıp Projeyi Kaldır'ı seçin) ve ardından npm düğümünü yeniden görüntülemek için projeyi yeniden yükleyebilirsiniz. Alternatif olarak, paket girdilerini package.json ekleyebilir ve projeyi oluşturarak yükleyebilirsiniz.

   Aşağıdaki npm paketlerini yüklemek için npm paketi yükleme iletişim kutusunu kullanın:

   Jest

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

   Bu paketler devDependencies altındaki package.json dosyasına eklenir.

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

   Mocha

   • Mocha
   • öne sürmek
   • @types/mocha
   • @types/node

   Bu paketler devDependencies altındaki package.json dosyasına eklenir.

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

10. package.jsonbölümünde, bölümün test sonuna bölümünü ekleyinscripts:

    Jest

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

    Mocha

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

11. Çözüm Gezgini'nde test klasörüne sağ tıklayın veYeni Öğe Ekle'yi> seçin ve ardından App.test.tsx adlı yeni bir dosya ekleyin.

    Bu işlem, yeni dosyayı test klasörünün altına ekler.

12. App.test.tsx'e aşağıdaki kodu ekleyin.

    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. Test Gezgini'ni açın ( Test>Windows>Test Gezgini'ni seçin) ve Visual Studio testleri bulur ve görüntüler. Testler başlangıçta gösterilmiyorsa, listeyi yenilemek için projeyi yeniden derleyin. Aşağıdaki çizimde iki farklı birim testi dosyası içeren Jest örneği gösterilmektedir.

    

    Uyarı

    Test Gezgini birim testlerinizi bulamayacağından TypeScript için outfileseçeneğini kullanmayın. seçeneğini kullanabilirsinizoutdir, ancak ve package.json gibi tsconfig.json yapılandırma dosyalarının proje kökünde olduğundan emin olun.

Testleri çalıştırma (ASP.NET Core)

Test Gezgini'nde Tümünü Çalıştır bağlantısına tıklayarak testleri çalıştırabilirsiniz. Alternatif olarak, bir veya daha fazla test veya grup seçerek, sağ tıklayarak ve kısayol menüsünden Çalıştır'ı seçerek testleri çalıştırabilirsiniz. Testler arka planda çalışır ve Test Gezgini otomatik olarak güncelleştirilir ve sonuçları gösterir. Ayrıca, sağ tıklayıp Hata Ayıkla'yı seçerek de seçili testlerde hata ayıklayabilirsiniz.

Aşağıdaki çizimde Jest örneği gösterilmektedir ve ikinci bir birim testi eklenmiştir.

Bazı birim testi çerçeveleri için birim testleri genellikle oluşturulan JavaScript koduna karşı çalıştırılır.

Uyarı

Çoğu TypeScript senaryosunda, TypeScript kodunda bir kesme noktası ayarlayarak, Test Gezgini'nde bir teste sağ tıklayarak ve Hata Ayıkla'yı seçerek birim testinde hata ayıklayabilirsiniz. Kaynak eşlemeleri kullanan bazı senaryolar gibi daha karmaşık senaryolarda, TypeScript kodunda kesme noktalarına isabet etmekte zorlanabilirsiniz. Geçici bir çözüm olarak anahtar sözcüğünü debugger kullanmayı deneyin.

Uyarı

Profil oluşturma testleri ve kod kapsamı şu anda desteklenmiyor.