Raporlayıcılar

Vitest, test çıktılarını çeşitli formatlarda görüntülemek için yerleşik raporlayıcılar sunar ve özel raporlayıcı kullanımına da olanak tanır. Farklı raporlayıcıları --reporter komut satırı seçeneğiyle veya yapılandırma dosyanızda bir reporters özelliği ekleyerek belirleyebilirsiniz. Herhangi bir raporlayıcı belirtilmediğinde, Vitest aşağıda açıklanan default raporlayıcıyı kullanır.

Komut satırı aracılığıyla raporlayıcıları kullanma:

bash

npx vitest --reporter=verbose

vitest.config.ts aracılığıyla raporlayıcıları kullanma:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    reporters: ['verbose'],
  },
});

Bazı raporlayıcılar, kendilerine ek seçenekler geçirilerek özelleştirilebilir. Raporlayıcıya özel seçenekler aşağıdaki bölümlerde açıklanmıştır.

export default defineConfig({
  test: {
    reporters: ['default', ['junit', { suiteName: 'UI tests' }]],
  },
});

Raporlayıcı Çıktısı

Varsayılan olarak, Vitest'in raporlayıcıları çıktılarını terminale yazdırır. json, html veya junit raporlayıcılarını kullanırken, testlerinizin çıktısını bir dosyaya yazmak için Vite yapılandırma dosyanıza veya CLI aracılığıyla bir outputFile yapılandırma seçeneği ekleyebilirsiniz.

CLIvitest.config.ts

bash

npx vitest --reporter=json --outputFile=./test-output.json

export default defineConfig({
  test: {
    reporters: ['json'],
    outputFile: './test-output.json',
  },
});

Raporlayıcıları Birleştirme

Test sonuçlarınızı farklı formatlarda yazdırmak amacıyla aynı anda birden fazla raporlayıcı kullanabilirsiniz. Örneğin:

bash

npx vitest --reporter=json --reporter=default

export default defineConfig({
  test: {
    reporters: ['json', 'default'],
    outputFile: './test-output.json',
  },
});

Yukarıdaki örnek, test sonuçlarını hem varsayılan stilde terminale yazdıracak hem de belirlenen çıktı dosyasına JSON olarak kaydedecektir.

Birden fazla raporlayıcı kullanırken, aşağıdaki gibi birden fazla çıktı dosyası belirlemek de mümkündür:

export default defineConfig({
  test: {
    reporters: ['junit', 'json', 'verbose'],
    outputFile: {
      junit: './junit-report.xml',
      json: './json-report.json',
    },
  },
});

Bu örnek, ayrı JSON ve XML raporları oluşturacak ve terminale ayrıntılı bir rapor yazdıracaktır.

Yerleşik Raporlayıcılar

Varsayılan Raporlayıcı

Varsayılan olarak (yani, hiçbir raporlayıcı belirtilmediğinde), Vitest çalışan testlerin özetini ve durumlarını altta gösterir. Bir test grubu geçtiğinde, durumu özetin üstünde raporlanır.

Raporlayıcıyı yapılandırarak özeti devre dışı bırakmanız mümkündür:

vitest.config.ts

export default defineConfig({
  test: {
    reporters: [['default', { summary: false }]],
  },
});

Devam eden testler için örnek çıktı aşağıdadır:

bash

 ✓ test/example-1.test.ts (5 tests | 1 skipped) 306ms
 ✓ test/example-2.test.ts (5 tests | 1 skipped) 307ms

 ❯ test/example-3.test.ts 3/5
 ❯ test/example-4.test.ts 1/5

 Test Files 2 passed (4)
      Tests 10 passed | 3 skipped (65)
   Start at 11:01:36
   Duration 2.00s

Testler bittikten sonraki son çıktı:

bash

 ✓ test/example-1.test.ts (5 tests | 1 skipped) 306ms
 ✓ test/example-2.test.ts (5 tests | 1 skipped) 307ms
 ✓ test/example-3.test.ts (5 tests | 1 skipped) 307ms
 ✓ test/example-4.test.ts (5 tests | 1 skipped) 307ms

 Test Files  4 passed (4)
      Tests  16 passed | 4 skipped (20)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

Temel Raporlayıcı

basic raporlayıcı, özet olmadan default raporlayıcıya eşdeğerdir.

CLIvitest.config.ts

bash

npx vitest --reporter=basic

export default defineConfig({
  test: {
    reporters: ['basic'],
  },
});

Temel raporlayıcı kullanılarak örnek çıktı:

bash

✓ __tests__/file1.test.ts (2) 725ms
✓ __tests__/file2.test.ts (2) 746ms

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

Ayrıntılı Raporlayıcı

Ayrıntılı raporlayıcı, default raporlayıcı ile aynıdır, ancak test grubu bittikten sonra her bir testi de görüntüler. Ayrıca slowTestThreshold değerinden daha uzun süren şu anda çalışan testleri de görüntüler. default raporlayıcıya benzer şekilde, raporlayıcıyı yapılandırarak özeti devre dışı bırakabilirsiniz.

CLIvitest.config.ts

bash

npx vitest --reporter=verbose

export default defineConfig({
  test: {
    reporters: [['verbose', { summary: false }]],
  },
});

Varsayılan slowTestThreshold: 300 ile devam eden testler için örnek çıktı:

bash

 ✓ __tests__/example-1.test.ts (2) 725ms
   ✓ first test file (2) 725ms
     ✓ 2 + 2 should equal 4
     ✓ 4 - 2 should equal 2

 ❯ test/example-2.test.ts 3/5
   ↳ should run longer than three seconds 1.57s
 ❯ test/example-3.test.ts 1/5

 Test Files 2 passed (4)
      Tests 10 passed | 3 skipped (65)
   Start at 11:01:36
   Duration 2.00s

Geçen bir test grubu için son terminal çıktısı örneği:

bash

✓ __tests__/file1.test.ts (2) 725ms
   ✓ first test file (2) 725ms
     ✓ 2 + 2 should equal 4
     ✓ 4 - 2 should equal 2
✓ __tests__/file2.test.ts (2) 746ms
  ✓ second test file (2) 746ms
    ✓ 1 + 1 should equal 2
    ✓ 2 - 1 should equal 1

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

Nokta İşaretli Raporlayıcı

Her tamamlanan test için tek bir nokta yazdırarak minimum çıktı sağlar ve yine de çalışan tüm testleri gösterir. Ayrıntılar yalnızca başarısız testler için ve test grubu için basic raporlayıcı özetiyle birlikte sağlanır.

CLIvitest.config.ts

bash

npx vitest --reporter=dot

export default defineConfig({
  test: {
    reporters: ['dot'],
  },
});

Geçen bir test grubu için örnek terminal çıktısı:

bash

....

 Test Files  2 passed (2)
      Tests  4 passed (4)
   Start at  12:34:32
   Duration  1.26s (transform 35ms, setup 1ms, collect 90ms, tests 1.47s, environment 0ms, prepare 267ms)

JUnit Raporlayıcı

Test sonuçlarının JUnit XML formatında bir raporunu çıkarır. outputFile yapılandırma seçeneği kullanılarak terminale yazdırılabilir veya bir XML dosyasına yazılabilir.

CLIvitest.config.ts

bash

npx vitest --reporter=junit

export default defineConfig({
  test: {
    reporters: ['junit'],
  },
});

Bir JUnit XML raporu örneği:

xml

<?xml version="1.0" encoding="UTF-8" ?>
<testsuites name="vitest tests" tests="2" failures="1" errors="0" time="0.503">
    <testsuite name="__tests__/test-file-1.test.ts" timestamp="2023-10-19T17:41:58.580Z" hostname="My-Computer.local" tests="2" failures="1" errors="0" skipped="0" time="0.013">
        <testcase classname="__tests__/test-file-1.test.ts" name="first test file &gt; 2 + 2 should equal 4" time="0.01">
            <failure message="expected 5 to be 4 // Object.is equality" type="AssertionError">
AssertionError: expected 5 to be 4 // Object.is equality
 ❯ __tests__/test-file-1.test.ts:20:28
            </failure>
        </testcase>
        <testcase classname="__tests__/test-file-1.test.ts" name="first test file &gt; 4 - 2 should equal 2" time="0">
        </testcase>
    </testsuite>
</testsuites>

Çıktı XML'i iç içe testsuites ve testcase etiketleri içerir. Bunlar ayrıca raporlayıcı seçenekleri suiteName ve classnameTemplate aracılığıyla özelleştirilebilir. classnameTemplate bir şablon dizesi veya bir fonksiyon olabilir.

classnameTemplate seçeneği için desteklenen yer tutucular şunlardır:

filename
filepath

export default defineConfig({
  test: {
    reporters: [
      [
        'junit',
        {
          suiteName: 'özel süit adı',
          classnameTemplate: 'dosya adı:{filename} - dosya yolu:{filepath}',
        },
      ],
    ],
  },
});

JSON Raporlayıcı

Jest'in --json seçeneğiyle uyumlu bir JSON formatında test sonuçlarının bir raporunu oluşturur. outputFile yapılandırma seçeneği kullanılarak terminale yazdırılabilir veya bir dosyaya yazılabilir.

CLIvitest.config.ts

bash

npx vitest --reporter=json

export default defineConfig({
  test: {
    reporters: ['json'],
  },
});

Bir JSON raporu örneği:

json

{
  "numTotalTestSuites": 4,
  "numPassedTestSuites": 2,
  "numFailedTestSuites": 1,
  "numPendingTestSuites": 1,
  "numTotalTests": 4,
  "numPassedTests": 1,
  "numFailedTests": 1,
  "numPendingTests": 1,
  "numTodoTests": 1,
  "startTime": 1697737019307,
  "success": false,
  "testResults": [
    {
      "assertionResults": [
        {
          "ancestorTitles": ["", "ilk test dosyası"],
          "fullName": " ilk test dosyası 2 + 2, 4'e eşit olmalı",
          "status": "failed",
          "title": "2 + 2, 4'e eşit olmalı",
          "duration": 9,
          "failureMessages": ["beklenen 5, 4 olmalı // Object.is eşitliği"],
          "location": {
            "line": 20,
            "column": 28
          },
          "meta": {}
        }
      ],
      "startTime": 1697737019787,
      "endTime": 1697737019797,
      "status": "failed",
      "message": "",
      "name": "/root-directory/__tests__/test-file-1.test.ts"
    }
  ],
  "coverageMap": {}
}

INFO

Vitest 3'ten beri, JSON raporlayıcı, kapsama etkinleştirilirse coverageMap içinde kapsama bilgisi içerir.

HTML Raporlayıcı

Etkileşimli bir GUI aracılığıyla test sonuçlarını görüntülemek için bir HTML dosyası oluşturur. Dosya oluşturulduktan sonra, Vitest yerel bir geliştirme sunucusu çalışır durumda tutacak ve raporu bir tarayıcıda görüntülemek için bir bağlantı sağlayacaktır.

Çıktı dosyası outputFile yapılandırma seçeneği kullanılarak belirtilebilir. outputFile seçeneği sağlanmazsa, yeni bir HTML dosyası oluşturulacaktır.

CLIvitest.config.ts

bash

npx vitest --reporter=html

export default defineConfig({
  test: {
    reporters: ['html'],
  },
});

TIP

Bu raporlayıcı, @vitest/ui paketinin kurulu olmasını gerektirir.

TAP Raporlayıcı

Test Anything Protocol (TAP) formatında bir rapor çıkarır.

CLIvitest.config.ts

bash

npx vitest --reporter=tap

export default defineConfig({
  test: {
    reporters: ['tap'],
  },
});

Bir TAP raporu örneği:

bash

TAP version 13
1..1
not ok 1 - __tests__/test-file-1.test.ts # time=14.00ms {
    1..1
    not ok 1 - first test file # time=13.00ms {
        1..2
        not ok 1 - 2 + 2 should equal 4 # time=11.00ms
            ---
            error:
                name: "AssertionError"
                message: "expected 5 to be 4 // Object.is equality"
            at: "/root-directory/__tests__/test-file-1.test.ts:20:28"
            actual: "5"
            expected: "4"
            ...
        ok 2 - 4 - 2 should equal 2 # time=1.00ms
    }
}

TAP Düz Raporlayıcı

Bir TAP düz raporu çıkarır. tap raporlayıcısı gibi, test sonuçları TAP standartlarına uygun olarak biçimlendirilir, ancak test grupları iç içe bir hiyerarşi yerine düz bir liste olarak biçimlendirilir.

CLIvitest.config.ts

bash

npx vitest --reporter=tap-flat

export default defineConfig({
  test: {
    reporters: ['tap-flat'],
  },
});

Bir TAP düz raporu örneği:

bash

TAP version 13
1..2
not ok 1 - __tests__/test-file-1.test.ts > first test file > 2 + 2 should equal 4 # time=11.00ms
    ---
    error:
        name: "AssertionError"
        message: "expected 5 to be 4 // Object.is equality"
    at: "/root-directory/__tests__/test-file-1.test.ts:20:28"
    actual: "5"
    expected: "4"
    ...
ok 2 - __tests__/test-file-1.test.ts > first test file > 4 - 2 should equal 2 # time=0.00ms

Askıda Kalan Süreç Raporlayıcı

Vitest'in güvenli bir şekilde çıkmasını engelleyen askıda kalan süreçlerin bir listesini görüntüler. hanging-process raporlayıcısı test sonuçlarını kendisi görüntülemez, ancak testler çalışırken süreçleri izlemek için başka bir raporlayıcıyla birlikte kullanılabilir. Bu raporlayıcıyı kullanmak kaynak yoğun olabilir, bu nedenle genellikle Vitest'in süreci sürekli olarak sonlandıramadığı durumlarda hata ayıklama amaçları için ayrılmalıdır.

CLIvitest.config.ts

bash

npx vitest --reporter=hanging-process

export default defineConfig({
  test: {
    reporters: ['hanging-process'],
  },
});

Github Actions Raporlayıcı

Test hataları için açıklamalar sağlamak üzere iş akışı komutlarını çıktı olarak verir. Bu raporlayıcı, process.env.GITHUB_ACTIONS === 'true' olduğunda bir default raporlayıcı ile otomatik olarak etkinleştirilir.

Varsayılan olmayan raporlayıcıları yapılandırırsanız, github-actions'ı açıkça eklemeniz gerekir.

export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
  },
});

GitHub'ın açıklama komut formatında yazdırılan dosya yollarını onWritePath seçeneğini kullanarak özelleştirebilirsiniz. Bu, Vitest'i Docker gibi kapsayıcılı bir ortamda çalıştırırken, dosya yollarının GitHub Actions ortamındaki yollarla eşleşmeyebileceği durumlarda kullanışlıdır.

export default defineConfig({
  test: {
    reporters: process.env.GITHUB_ACTIONS
      ? [
          'default',
          [
            'github-actions',
            {
              onWritePath(path) {
                return path.replace(
                  /^\/app\//,
                  `${process.env.GITHUB_WORKSPACE}/`
                );
              },
            },
          ],
        ]
      : ['default'],
  },
});

Blob Raporlayıcı

Test sonuçlarını makinede depolar, böylece daha sonra --merge-reports komutu kullanılarak birleştirilebilirler. Varsayılan olarak, tüm sonuçları .vitest-reports klasöründe depolar, ancak --outputFile veya --outputFile.blob bayraklarıyla geçersiz kılınabilir.

bash

npx vitest --reporter=blob --outputFile=reports/blob-1.json

Vitest'i farklı makinelerde --shard bayrağıyla çalıştırıyorsanız bu raporlayıcıyı kullanmanızı öneririz. Tüm blob raporları, CI pipeline'ınızın sonunda --merge-reports komutu kullanılarak herhangi bir rapora birleştirilebilir:

bash

npx vitest --merge-reports=reports --reporter=json --reporter=default

TIP

Hem --reporter=blob hem de --merge-reports izleme modunda çalışmaz.

Özel Raporlayıcılar

Raporlayıcılar ayarında paket adlarını belirterek NPM'den yüklenen üçüncü taraf özel raporlayıcıları kullanabilirsiniz:

CLIvitest.config.ts

bash

npx vitest --reporter=some-published-vitest-reporter

export default defineConfig({
  test: {
    reporters: ['some-published-vitest-reporter'],
  },
});

Ek olarak, kendi özel raporlayıcılarınızı tanımlayabilir ve dosya yollarını belirterek kullanabilirsiniz:

bash

npx vitest --reporter=./path/to/reporter.ts

Özel raporlayıcılar Reporter arayüzünü uygulamalıdır.

Raporlayıcılar ​

Raporlayıcı Çıktısı ​

Raporlayıcıları Birleştirme ​

Yerleşik Raporlayıcılar ​

Varsayılan Raporlayıcı ​

Temel Raporlayıcı ​

Ayrıntılı Raporlayıcı ​

Nokta İşaretli Raporlayıcı ​

JUnit Raporlayıcı ​

JSON Raporlayıcı ​

HTML Raporlayıcı ​

TAP Raporlayıcı ​

TAP Düz Raporlayıcı ​

Askıda Kalan Süreç Raporlayıcı ​

Github Actions Raporlayıcı ​

Blob Raporlayıcı ​

Özel Raporlayıcılar ​

Raporlayıcılar

Raporlayıcı Çıktısı

Raporlayıcıları Birleştirme

Yerleşik Raporlayıcılar

Varsayılan Raporlayıcı

Temel Raporlayıcı

Ayrıntılı Raporlayıcı

Nokta İşaretli Raporlayıcı

JUnit Raporlayıcı

JSON Raporlayıcı

HTML Raporlayıcı

TAP Raporlayıcı

TAP Düz Raporlayıcı

Askıda Kalan Süreç Raporlayıcı

Github Actions Raporlayıcı

Blob Raporlayıcı

Özel Raporlayıcılar