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)

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

Visual Studio 2022'de desteklenen CLI tabanlı projeler Test Gezgini ile çalışır. Jest React ve Vue projeleri için yerleşik test çerçevesidir ve Karma ve Jasmine angular projeleri için 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'da 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:

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

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.8 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 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>Jest</JavaScriptTestFramework>
   </PropertyGroup> 
   

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

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

3. Çözüm Gezgini'de 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:

   • jest
   • jest-editor-support

   Bu paketler package.json dosyasına bağımlılıklar altında eklenir.

4. package.json dosyasında, bölümün test sonuna scripts bölümünü ekleyin:

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

5. Çözüm Gezgini'da src klasörüne sağ tıklayın ve Yeni Öğe Ekle'yi>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.

   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.

   

   Not

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

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.

Not

Ç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.

Not

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

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(sağ bölme) bölümünde 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
   • Microsoft.JavaScript.UnitTest

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

4. Çözüm Gezgini 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'da ASP.NET Core proje düğümüne sağ tıklayın ve Yeni Öğe Ekle'yi > seçin. TypeScript JSON Yapılandırma Dosyası'nı ve ardından Ekle'yi seçin.

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

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

7. tsconfig.json dosyasını 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'da projeye sağ tıklayın ve Yeni Öğe Ekle'yi>seçin (veya Ctrl + SHIFT A tuşlarına + basın). npm dosyasını bulmak için arama kutusunu kullanın, npm Yapılandırma Dosyası'nı seçin, varsayılan adı kullanın ve Ekle'ye tıklayın.

   Proje köküne bir package.json dosyası eklenir.

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

   Not

   Bazı senaryolarda, Çözüm Gezgini burada açıklanan bilinen bir sorun nedeniyle 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, package.json dosyasına paket girdilerini 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ında package.json dosyasına eklenir.

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

   Mocha

   • Mocha
   • Assert
   • @types/mocha
   • @types/node

   Bu paketler devDependencies altında 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.json dosyasında, bölümün test sonuna scripts bölümünü ekleyin:

    Jest

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

    Mocha

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

11. Çözüm Gezgini'da test klasörüne sağ tıklayın ve Yeni Öğ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.

    

    Not

    Test Gezgini birim testlerinizi bulamayacağından TypeScript için tsconfig.json dosyasındaki seçeneğini kullanmayınoutfile. seçeneğini kullanabilirsinizoutdir, ancak ve tsconfig.json gibi package.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.

Not

Ç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.

Not

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