Unit yang menguji 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 prompt 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)
• Vitest (vitest.dev)

Menulis pengujian unit untuk proyek berbasis CLI (.esproj)

Proyek berbasis CLI yang didukung di Visual Studio 2022 berfungsi dengan Test Explorer. Vitest adalah kerangka kerja pengujian bawaan untuk proyek React dan Vue (sebelumnya Jest), 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 memilihUji Penjelajah> Uji 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:

• Pengujian dengan Vitest
• 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.12 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>Vitest</JavaScriptTestFramework>
   </PropertyGroup> 
   

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

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

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

   Gunakan dialog penginstalan paket npm untuk menginstal paket npm berikut:

   • vitest

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

   Nota

   Jika Anda menggunakan jest, paket npm jest-editor-support diperlukan serta paket jest.

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

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

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.

   import { describe, it, expect } from 'vitest';
   
   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.

   

   Nota

   Untuk TypeScript, jangan gunakan outfile opsi 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.

   Penting

   Jika output dari Pengujian di jendela Output menunjukkan ReadOnlySpan kesalahan selama penemuan pengujian, gunakan solusi berikut untuk masalah MSBuild yang diketahui. Untuk Visual Studio 2022, buka folder, Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform, dan ganti nama System.Memory.dll menjadi nama yang berbeda. Perbaikan ini memungkinkan penemuan pengujian.

Jalankan pengujian (.esproj)

Anda dapat menjalankan pengujian dengan mengklik tautan 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.

Nota

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 debugger kata kunci.

Nota

Pengujian pembuatan profil dan cakupan kode saat ini tidak didukung.

Jalankan pengujian unit dari baris perintah untuk proyek berbasis CLI (.esproj)

Anda dapat menjalankan pengujian unit langsung dari baris perintah untuk kerangka kerja pengujian unit dengan cara yang sama seperti yang Anda lakukan jika Anda tidak menggunakan Visual Studio.

Anda juga dapat memilih untuk menjalankan pengujian dari baris perintah menggunakan vstest.console. Misalnya, Anda mungkin ingin menggunakan vstest.console untuk mempertahankan konsistensi dengan pengujian unit C#, atau untuk berjalan di Azure DevOps. Gunakan perintah berikut, tetapi ganti MyProj dengan nama proyek Anda.

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

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 proyekView-Controller ASP.NET Core Model.

   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

   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 PropertyGroup elemen .

   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 kita 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 kompilator 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.

   Nota

   Dalam beberapa skenario, Penjelajah Solusi mungkin tidak menampilkan simpul npm karena masalah umum yang dijelaskan di sini. Jika Anda perlu melihat simpul npm, Anda dapat membongkar proyek (klik kanan proyek dan pilih Bongkar Proyek) lalu muat ulang proyek untuk membuat simpul 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
   • Menegaskan
   • @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 Uji>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.

    

    Nota

    Untuk TypeScript, jangan gunakan outfile opsi 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.

Menjalankan pengujian (ASP.NET Core)

Anda dapat menjalankan pengujian dengan mengklik tautan 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.

Nota

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 debugger kata kunci.

Nota

Pengujian pembuatan profil dan cakupan kode saat ini tidak didukung.