Anlık Görüntüler

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

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

Bir anlık görüntü kullanıldığında, Vitest verilen değerin bir anlık görüntüsünü alır ve ardından 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: ya değişiklik beklenmediktir ya da referans anlık görüntünün sonucun yeni sürümüne göre güncellenmesi gerekmektedir.

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://vitest.dev/guide/snapshot.html

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 geçer. Eşleşmezlerse, ya test çalıştırıcısı kodunuzda düzeltilmesi gereken bir hata bulmuştur ya da uygulama değişmiştir ve anlık görüntünün güncellenmesi gerekmektedir.

WARNING

Eşzamansız testlerle Anlık Görüntüler kullanırken, doğru testin algılandığından emin olmak için yerel Test Bağlamı'ndan 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, beklenen çıktıyı farklı dosyalar arasında geçiş yapmadan doğrudan görmenizi sağlar.

WARNING

Eşzamansız testlerle Anlık Görüntüler kullanırken, doğru testin algılandığından emin olmak için yerel Test Bağlamı'ndan 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 duruma göre 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 `) escape etmemiz gerektiği anlamına gelir. Bu durum, anlık görüntü içeriği için sözdizimi vurgulamasını kaybetmenize neden olabilir (eğer belirli bir dilde yazılmışlarsa).

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 herhangi bir dosya uzantısı atamanıza olanak tanır ve okunabilirliği artırır.

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 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 serileştirme 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 'vitest/config';

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

Aşağıdaki gibi bir test eklediğinizde:

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'ını kullanıyoruz. Daha fazla bilgi için buraya bakabilirsiniz: pretty-format.

Jest'ten Farklılıkları

Vitest, Jest'in Snapshot ö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://vitest.dev/guide/snapshot.html

Bu, işlevselliği gerçekten etkilemez ancak Jest'ten geçiş yaparken commit diff'inizi 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 tarafından desteklenmektedir. Vitest'te daha temiz anlık görüntü çıktıları için printBasicPrototype varsayılan olarak false olarak ayarlanmıştır; Jest'in 29.0.0 sürümünden önceki versiyonlarında 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 için daha makul bir varsayılan olduğuna inanıyoruz. Hala Jest'in davranışını tercih ediyorsanız, yapılandırmanızı değiştirebilirsiniz:

import { defineConfig } from 'vitest/config';

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ü şöyledir:

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üler
  // Vitest, toMatchInlineSnapshot ile aynı değeri yazdırır
  expect(() => {
    throw new Error('error')
  }).toThrowErrorMatchingInlineSnapshot(`"error"`) 
  }).toThrowErrorMatchingInlineSnapshot(`[Error: error]`) 
})