Anlık Görüntü

Vue School'dan video ile Anlık Görüntü öğrenin

Anlık görüntü testleri, fonksiyonlarınızın çıktısının beklenmedik bir şekilde değişmediğinden emin olmak için oldukça kullanışlı bir araçtır.

Anlık görüntü kullanıldığında, Vitest verilen değerin bir anlık görüntüsünü alır ve bunu testin yanında depolanan bir referans anlık görüntü dosyasıyla karşılaştırır. İki anlık görüntü eşleşmezse test başarısız olur. Bu durumda, ya değişiklik beklenmedik bir durumdur ya da referans anlık görüntünün, sonucun yeni sürümüne göre güncellenmesi gerekir.

Anlık Görüntüleri Kullanma

Bir değeri anlık görüntülemek için expect() API'sinden toMatchSnapshot() kullanabilirsiniz:

import { expect, it } from 'vitest';

it('toUpperCase', () => {
  const result = toUpperCase('foobar');
  expect(result).toMatchSnapshot();
});

Bu test ilk kez çalıştırıldığında, Vitest şöyle görünen bir anlık görüntü dosyası oluşturur:

// Vitest Snapshot v1, https://www.getbook.com/tr/book/vitest-1/guide/snapshot

exports['toUpperCase 1'] = '"FOOBAR"';

Anlık görüntü dosyası, kod değişiklikleriyle birlikte commit edilmeli ve kod inceleme sürecinizin bir parçası olarak gözden geçirilmelidir. Sonraki test çalıştırmalarında, Vitest oluşturulan çıktıyı önceki anlık görüntüyle karşılaştıracaktır. Eşleşirlerse test başarılı olur. Eşleşmezlerse, test çalıştırıcısı kodunuzda düzeltilmesi gereken bir hata bulmuş olabilir veya uygulama değiştiği için anlık görüntünün güncellenmesi gerekebilir.

WARNING

Asenkron testlerde Anlık Görüntüler kullanırken, doğru testin algılandığından emin olmak için yerel Test Bağlamı içindeki expect kullanılmalıdır.

Satır İçi Anlık Görüntüler

Benzer şekilde, anlık görüntüyü test dosyası içinde satır içi olarak depolamak için toMatchInlineSnapshot() kullanabilirsiniz.

import { expect, it } from 'vitest';

it('toUpperCase', () => {
  const result = toUpperCase('foobar');
  expect(result).toMatchInlineSnapshot();
});

Bir anlık görüntü dosyası oluşturmak yerine, Vitest anlık görüntüyü bir dize olarak güncellemek için test dosyasını doğrudan değiştirecektir:

import { expect, it } from 'vitest';

it('toUpperCase', () => {
  const result = toUpperCase('foobar');
  expect(result).toMatchInlineSnapshot('"FOOBAR"');
});

Bu, farklı dosyalar arasında geçiş yapmadan beklenen çıktıyı doğrudan görmenizi sağlar.

WARNING

Asenkron testlerde Anlık Görüntüler kullanırken, doğru testin algılandığından emin olmak için yerel Test Bağlamı içindeki expect kullanılmalıdır.

Anlık Görüntüleri Güncelleme

Alınan değer anlık görüntüyle eşleşmediğinde, test başarısız olur ve aralarındaki farkı gösterir. Anlık görüntü değişikliği bekleniyorsa, anlık görüntüyü mevcut durumdan güncellemek isteyebilirsiniz.

İzleme modunda, başarısız olan anlık görüntüyü doğrudan güncellemek için terminalde u tuşuna basabilirsiniz.

Veya Vitest'in anlık görüntüleri güncellemesini sağlamak için CLI'da --update veya -u bayrağını kullanabilirsiniz.

vitest -u

Dosya Anlık Görüntüleri

toMatchSnapshot() çağrıldığında, tüm anlık görüntüleri biçimlendirilmiş bir anlık görüntü dosyasına kaydederiz. Bu, anlık görüntü dizesindeki bazı karakterleri (yani çift tırnak " ve ters tırnak `) kaçırmamız gerektiği anlamına gelir. Bu arada, anlık görüntü içeriği için sözdizimi vurgulamasını kaybedebilirsiniz (eğer bir dildeyse).

Bu nedenle, bir dosyayla açıkça eşleşmek için toMatchFileSnapshot() özelliğini tanıttık. Bu, anlık görüntü dosyasına istediğiniz dosya uzantısını atamanıza olanak tanır ve bu dosyaları daha okunabilir hale getirir.

import { expect, it } from 'vitest';

it('render basic', async () => {
  const result = renderHTML(h('div', { class: 'foo' }));
  await expect(result).toMatchFileSnapshot('./test/basic.output.html');
});

Bu, ./test/basic.output.html dosyasının içeriğiyle karşılaştırılacaktır. Ve --update bayrağıyla geri yazılabilir.

Resim Anlık Görüntüleri

jest-image-snapshot kullanarak resimleri anlık görüntülemek de mümkündür.

npm i -D jest-image-snapshot

test('image snapshot', () => {
  expect(readFileSync('./test/stubs/input-image.png')).toMatchImageSnapshot();
});

Özel Serileştirici

Anlık görüntülerinizin nasıl serileştirileceğini değiştirmek için kendi mantığınızı ekleyebilirsiniz. Jest gibi, Vitest'in de yerleşik JavaScript türleri, HTML öğeleri, ImmutableJS ve React öğeleri için varsayılan serileştiricileri vardır.

expect.addSnapshotSerializer API'sini kullanarak açıkça özel serileştirici ekleyebilirsiniz.

expect.addSnapshotSerializer({
  serialize(val, config, indentation, depth, refs, printer) {
    // `printer`, mevcut eklentileri kullanarak bir değeri serileştiren bir fonksiyondur.
    return `Pretty foo: ${printer(val.foo, config, indentation, depth, refs)}`;
  },
  test(val) {
    return val && Object.prototype.hasOwnProperty.call(val, 'foo');
  },
});

Ayrıca, özel serileştiricileri örtük olarak eklemek için snapshotSerializers seçeneğini de destekliyoruz.

import { SnapshotSerializer } from 'vitest';

export default {
  serialize(val, config, indentation, depth, refs, printer) {
    // `printer`, mevcut eklentileri kullanarak bir değeri serileştiren bir fonksiyondur.
    return `Pretty foo: ${printer(val.foo, config, indentation, depth, refs)}`;
  },
  test(val) {
    return val && Object.prototype.hasOwnProperty.call(val, 'foo');
  },
} satisfies SnapshotSerializer;

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    snapshotSerializers: ['path/to/custom-serializer.ts'],
  },
});

Şöyle bir test ekledikten sonra:

test('foo snapshot test', () => {
  const bar = {
    foo: {
      x: 1,
      y: 2,
    },
  };

  expect(bar).toMatchSnapshot();
});

Aşağıdaki anlık görüntüyü alacaksınız:

Pretty foo: Object {
  "x": 1,
  "y": 2,
}

Anlık görüntüleri serileştirmek için Jest'in pretty-format kütüphanesini kullanıyoruz. Daha fazla bilgi için buraya bakabilirsiniz: pretty-format.

Jest'ten Farkı

Vitest, Jest'in Anlık Görüntü özelliğiyle neredeyse uyumlu bir özellik sunar, birkaç istisna dışında:

1. Anlık görüntü dosyasındaki yorum başlığı farklıdır {#_1-comment-header-in-the-snapshot-file-is-different}

- // Jest Snapshot v1, https://goo.gl/fbAQLP
+ // Vitest Snapshot v1, https://www.getbook.com/tr/book/vitest-1/guide/snapshot

Bu, işlevselliği etkilemez; ancak Jest'ten geçiş yaparken commit farklılıklarını etkileyebilir.

2. printBasicPrototype varsayılan olarak false'tur {#_2-printbasicprototype-is-default-to-false}

Hem Jest hem de Vitest'in anlık görüntüleri pretty-format kütüphanesi tarafından desteklenmektedir. Vitest'te daha temiz bir anlık görüntü çıktısı elde etmek için printBasicPrototype varsayılan olarak false olarak ayarlanmıştır, Jest <29.0.0'da ise varsayılan olarak true'dur.

import { expect, test } from 'vitest';

test('snapshot', () => {
  const bar = [
    {
      foo: 'bar',
    },
  ];

  // Jest'te
  expect(bar).toMatchInlineSnapshot(`
    Array [
      Object {
        "foo": "bar",
      },
    ]
  `);

  // Vitest'te
  expect(bar).toMatchInlineSnapshot(`
    [
      {
        "foo": "bar",
      },
    ]
  `);
});

Bunun okunabilirlik ve genel geliştirici deneyimi (DX) için daha mantıklı bir varsayılan olduğuna inanıyoruz. Hala Jest'in davranışını tercih ediyorsanız, yapılandırmanızı değiştirebilirsiniz:

// vitest.config.js
export default defineConfig({
  test: {
    snapshotFormat: {
      printBasicPrototype: true,
    },
  },
});

3. Özel mesajlar için ayırıcı olarak iki nokta üst üste : yerine büyüktür işareti > kullanılır {#_3-chevron-is-used-as-a-separator-instead-of-colon-for-custom-messages}

Vitest, bir anlık görüntü dosyası oluşturulurken özel bir mesaj iletildiğinde okunabilirlik için iki nokta üst üste : yerine büyüktür işareti > kullanır.

Aşağıdaki örnek test kodu için:

test('toThrowErrorMatchingSnapshot', () => {
  expect(() => {
    throw new Error('error');
  }).toThrowErrorMatchingSnapshot('hint');
});

Jest'te anlık görüntü şöyle olacaktır:

exports[`toThrowErrorMatchingSnapshot: hint 1`] = `"error"`;

Vitest'te eşdeğer anlık görüntü şöyle olacaktır:

exports[`toThrowErrorMatchingSnapshot > hint 1`] = `[Error: error]`;

4. toThrowErrorMatchingSnapshot ve toThrowErrorMatchingInlineSnapshot için varsayılan Error anlık görüntüsü farklıdır {#_4-default-error-snapshot-is-different-for-tothrowerrormatchingsnapshot-and-tothrowerrormatchinginlinesnapshot}

import { expect, test } from 'vitest';

test('snapshot', () => {
  // Jest ve Vitest'te
  expect(new Error('error')).toMatchInlineSnapshot(`[Error: error]`);

  // Jest, `Error` örneği için `Error.message`'ı anlık görüntü olarak kaydeder
  // Vitest, toMatchInlineSnapshot ile aynı değeri gösterir
  expect(() => {
    throw new Error('error');
  }).toThrowErrorMatchingInlineSnapshot(`"error"`); 
  }).toThrowErrorMatchingInlineSnapshot(`[Error: error]`); 
});