Pengujian unit JavaScript dan TypeScript di Visual Studio

Anda dapat menulis dan menjalankan pengujian unit di Visual Studio menggunakan beberapa kerangka kerja JavaScript yang lebih populer tanpa perlu beralih ke perintah. Proyek Node.js dan ASP.NET Core didukung.

Kerangka kerja yang didukung adalah:

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

Menulis pengujian unit untuk proyek berbasis CLI (.esproj)

Proyek berbasis CLI didukung di Visual Studio 2022 berfungsi dengan Test Explorer. Jest adalah kerangka kerja pengujian bawaan untuk proyek React dan Vue, dan Karma dan Jasmine digunakan untuk proyek Angular. Secara default, Anda akan dapat menjalankan pengujian default yang disediakan oleh setiap kerangka kerja, serta pengujian tambahan yang Anda tulis. Cukup tekan tombol Jalankan di Test Explorer. Jika Anda belum membuka Test Explorer, Anda dapat menemukannya dengan memilihTest>Test Explorer di bilah menu.

Untuk menjalankan pengujian unit dari baris perintah, klik kanan proyek di Penjelajah Solusi, pilih Buka di Terminal, dan jalankan perintah khusus untuk jenis pengujian.

Untuk informasi tentang menyiapkan pengujian unit, lihat yang berikut ini:

• Menguji React dengan Jest
• Pengujian sudut
• Menguji Vue.js

Contoh sederhana juga disediakan di sini. Namun, gunakan tautan sebelumnya untuk informasi lengkap.

Menambahkan pengujian unit (.esproj)

Contoh berikut didasarkan pada templat proyek TypeScript React yang disediakan di Visual Studio 2022 versi 17.8 atau yang lebih baru, yang merupakan templat Proyek React TypeScript Mandiri. Untuk Vue dan Angular, langkah-langkahnya mirip.

1. Di Penjelajah Solusi, klik kanan proyek React dan pilih Edit File Proyek.

2. Pastikan properti berikut ada dalam file .esproj dengan nilai yang ditampilkan.

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

   Contoh ini menentukan Jest sebagai kerangka kerja pengujian. Anda dapat menentukan Mocha, Tape, atau Jasmine sebagai gantinya.

   Elemen JavaScriptTestRoot menentukan bahwa pengujian unit Anda akan berada di folder src akar proyek.

3. Di Penjelajah Solusi, klik kanan simpul npm dan pilih Instal paket npm baru.

   Gunakan dialog penginstalan paket npm untuk menginstal paket npm berikut:

   • Bercanda
   • jest-editor-support

   Paket ini ditambahkan ke file package.json di bawah dependensi.

4. Di package.json, tambahkan bagian test di akhir bagian scripts :

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

5. Di Penjelajah Solusi, klik kanan folder src dan pilih Tambahkan>Item Baru, lalu tambahkan file baru bernama App.test.tsx.

   Ini menambahkan file baru di bawah folder src.

6. Tambahkan kode berikut ke App.test.tsx.

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

7. Buka Test Explorer (pilih Test>Explorer) dan Visual Studio menemukan dan menampilkan pengujian. Jika pengujian tidak ditampilkan pada awalnya, maka bangun kembali proyek untuk me-refresh daftar.

   

   Catatan

   Untuk TypeScript, jangan gunakan opsi outfile di tsconfig.json, karena Test Explorer tidak akan dapat menemukan pengujian unit Anda. Anda dapat menggunakan opsi outdir, tetapi pastikan bahwa file konfigurasi seperti package.json dan tsconfig.json berada di akar proyek.

Jalankan pengujian (.esproj)

Anda dapat menjalankan pengujian dengan mengklik link Jalankan Semua di Test Explorer. Atau, Anda dapat menjalankan pengujian dengan memilih satu atau beberapa pengujian atau grup, mengklik kanan, dan memilih Jalankan dari menu pintasan. Pengujian berjalan di latar belakang, dan Test Explorer secara otomatis memperbarui dan menunjukkan hasilnya. Selain itu, Anda juga dapat men-debug pengujian yang dipilih dengan mengklik kanan dan memilih Debug.

Ilustrasi berikut menunjukkan contoh dengan pengujian unit kedua ditambahkan.

Untuk beberapa kerangka kerja pengujian unit, pengujian unit biasanya dijalankan terhadap kode JavaScript yang dihasilkan.

Catatan

Dalam sebagian besar skenario TypeScript, Anda dapat men-debug pengujian unit dengan mengatur titik henti dalam kode TypeScript, mengklik kanan pengujian di Test Explorer, dan memilih Debug. Dalam skenario yang lebih kompleks, seperti beberapa skenario yang menggunakan peta sumber, Anda mungkin mengalami kesulitan mencapai titik henti dalam kode TypeScript. Sebagai solusinya, coba gunakan kata kunci debugger.

Catatan

Pengujian pembuatan profil dan cakupan kode saat ini tidak didukung.

Menulis pengujian unit untuk ASP.NET Core

Untuk menambahkan dukungan untuk pengujian unit JavaScript dan TypeScript dalam proyek ASP.NET Core, Anda perlu menambahkan dukungan pengujian TypeScript, Npm, dan unit ke proyek dengan menyertakan paket NuGet yang diperlukan.

Menambahkan pengujian unit (ASP.NET Core)

Contoh berikut didasarkan pada templat proyek ASP.NET Core Model-View-Controller, dan termasuk menambahkan pengujian unit Jest atau Mocha.

1. Buat proyek ASP.NET Core Model-View-Controller.

   Untuk contoh proyek, lihat Menambahkan TypeScript ke aplikasi ASP.NET Core yang sudah ada. Untuk dukungan pengujian unit, kami sarankan Anda memulai dengan templat proyek ASP.NET Core standar.

2. Di Penjelajah Solusi (panel kanan), klik kanan simpul proyek ASP.NET Core dan pilih Kelola Paket NuGet untuk Solusi.

3. Di tab Telusuri , cari paket berikut dan instal masing-masing paket:

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

   Gunakan paket NuGet untuk menambahkan dukungan TypeScript alih-alih paket TypeScript npm.

4. Di Penjelajah Solusi, klik kanan simpul proyek dan pilih Edit File Proyek.

   File .csproj terbuka di Visual Studio.

5. Tambahkan elemen berikut ke file .csproj dalam elemen PropertyGroup.

   Contoh ini menentukan Jest atau Mocha sebagai kerangka kerja pengujian. Anda dapat menentukan Tape atau Jasmine sebagai gantinya.

   Jest

   Elemen JavaScriptTestRoot menentukan bahwa pengujian unit Anda akan berada di folder pengujian akar proyek.

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

   Mocha

   Elemen JavaScriptTestRoot menentukan lokasi untuk pengujian unit Anda. Untuk menyederhanakan konfigurasi untuk Mocha, dalam contoh ini kami mengarahkan akar pengujian ke folder output, *wwwroot\js\tests*.

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

6. Di Penjelajah Solusi, klik kanan simpul proyek ASP.NET Core dan pilih Tambahkan > Item Baru. Pilih File Konfigurasi JSON TypeScript, lalu pilih Tambahkan.

   Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.

   Visual Studio menambahkan file tsconfig.json ke akar proyek. Anda dapat menggunakan file ini untuk mengonfigurasi opsi untuk pengompilasi TypeScript.

7. Buka tsconfig.json dan ganti kode default dengan kode berikut:

   Jest

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

   Untuk Jest, jika Anda ingin mengkompilasi pengujian TypeScript ke JavaScript, hapus folder pengujian dari bagian kecualikan .

   Folder skrip adalah tempat Anda dapat menempatkan kode TypeScript untuk aplikasi Anda. Untuk contoh proyek yang menambahkan kode, lihat Menambahkan TypeScript ke aplikasi ASP.NET Core yang sudah ada.

   Mocha

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

   Folder skrip adalah tempat Anda dapat menempatkan kode TypeScript untuk aplikasi Anda. Untuk contoh proyek yang menambahkan kode, lihat Menambahkan TypeScript ke aplikasi ASP.NET Core yang sudah ada.

8. Klik kanan proyek di Penjelajah Solusi dan pilih Tambahkan>Item Baru (atau tekan Ctrl + SHIFT + A). Gunakan kotak pencarian untuk menemukan file npm, pilih File Konfigurasi npm, gunakan nama default, dan klik Tambahkan.

   File package.json ditambahkan ke akar proyek.

9. Di Penjelajah Solusi, klik kanan simpul npm di bawah Dependensi dan pilih Instal paket npm baru.

   Catatan

   Dalam beberapa skenario, Penjelajah Solusi mungkin tidak menampilkan simpul npm karena masalah umum yang dijelaskan di sini. Jika Anda perlu melihat node npm, Anda dapat membongkar proyek (klik kanan proyek dan pilih Bongkar Proyek) lalu muat ulang proyek untuk membuat node npm muncul kembali. Atau, Anda dapat menambahkan entri paket ke package.json dan menginstal dengan membangun proyek.

   Gunakan dialog penginstalan paket npm untuk menginstal paket npm berikut:

   Jest

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

   Paket ini ditambahkan ke file package.json di bawah devDependencies.

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

   Mocha

   • Mocha
   • assert
   • @types/mocha
   • @types/node

   Paket ini ditambahkan ke file package.json di bawah devDependencies.

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

10. Di package.json, tambahkan bagian test di akhir bagian scripts :

    Jest

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

    Mocha

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

11. Di Penjelajah Solusi, klik kanan folder uji dan pilih Tambahkan>Item Baru, lalu tambahkan file baru bernama App.test.tsx.

    Ini menambahkan file baru di bawah folder pengujian .

12. Tambahkan kode berikut ke 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. Buka Test Explorer (pilih Test>Windows>Test Explorer) dan Visual Studio menemukan dan menampilkan pengujian. Jika pengujian tidak ditampilkan pada awalnya, maka bangun kembali proyek untuk me-refresh daftar. Ilustrasi berikut menunjukkan contoh Jest, dengan dua file pengujian unit yang berbeda.

    

    Catatan

    Untuk TypeScript, jangan gunakan opsi outfile di tsconfig.json, karena Test Explorer tidak akan dapat menemukan pengujian unit Anda. Anda dapat menggunakan opsi outdir, tetapi pastikan bahwa file konfigurasi seperti package.json dan tsconfig.json berada di akar proyek.

Jalankan pengujian (ASP.NET Core)

Anda dapat menjalankan pengujian dengan mengklik link Jalankan Semua di Test Explorer. Atau, Anda dapat menjalankan pengujian dengan memilih satu atau beberapa pengujian atau grup, mengklik kanan, dan memilih Jalankan dari menu pintasan. Pengujian berjalan di latar belakang, dan Test Explorer secara otomatis memperbarui dan menunjukkan hasilnya. Selain itu, Anda juga dapat men-debug pengujian yang dipilih dengan mengklik kanan dan memilih Debug.

Ilustrasi berikut menunjukkan contoh Jest, dengan pengujian unit kedua ditambahkan.

Untuk beberapa kerangka kerja pengujian unit, pengujian unit biasanya dijalankan terhadap kode JavaScript yang dihasilkan.

Catatan

Dalam sebagian besar skenario TypeScript, Anda dapat men-debug pengujian unit dengan mengatur titik henti dalam kode TypeScript, mengklik kanan pengujian di Test Explorer, dan memilih Debug. Dalam skenario yang lebih kompleks, seperti beberapa skenario yang menggunakan peta sumber, Anda mungkin mengalami kesulitan mencapai titik henti dalam kode TypeScript. Sebagai solusinya, coba gunakan kata kunci debugger.

Catatan

Pengujian pembuatan profil dan cakupan kode saat ini tidak didukung.