Snapshot

Ismerje meg a Snapshotot videó segítségével a Vue Schooltól

A snapshot tesztek rendkívül hasznos eszközök, amikor biztosítani szeretnénk, hogy a függvényeink kimenete ne változzon váratlanul.

Snapshot használatakor a Vitest készít egy pillanatfelvételt a megadott értékről, majd összehasonlítja azt egy referencia snapshot fájllal, amelyet a teszt mellett tárol. A teszt elbukik, ha a két snapshot nem egyezik: ez vagy azt jelenti, hogy a változás váratlan, vagy a referencia snapshotot frissíteni kell az eredmény új változatára.

Snapshots használata

Egy érték snapshotjának elkészítéséhez használhatja a toMatchSnapshot() függvényt az expect() API-ból:

import { expect, it } from 'vitest';

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

Amikor ez a teszt először fut, a Vitest létrehoz egy snapshot fájlt, amely a következőképpen néz ki:

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

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

A snapshot artefaktumot a kódváltozásokkal együtt kell véglegesíteni, és a kódellenőrzési folyamat részeként át kell tekinteni. A későbbi tesztfuttatások során a Vitest összehasonlítja a renderelt kimenetet az előző snapshottal. Ha egyeznek, a teszt sikeres lesz. Ha nem egyeznek, az azt jelenti, hogy a tesztfuttató hibát talált a kódban, amit javítani kell, vagy az implementáció megváltozott, és a snapshotot frissíteni kell.

WARNING

Amikor snapshotokat használ aszinkron és konkurens tesztekkel, a helyi Tesztkörnyezetből származó expect-et kell használni, hogy biztosítsa a megfelelő teszt azonosítását.

Beágyazott Snapshots (Inline Snapshots)

Hasonlóképpen, használhatja a toMatchInlineSnapshot() függvényt a snapshot beágyazott tárolására a tesztfájlon belül.

import { expect, it } from 'vitest';

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

Snapshot fájl létrehozása helyett a Vitest közvetlenül módosítja a tesztfájlt, és a snapshotot stringként frissíti:

import { expect, it } from 'vitest';

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

Ez lehetővé teszi, hogy közvetlenül lássa a várt kimenetet anélkül, hogy különböző fájlok között kellene váltania.

WARNING

Amikor snapshotokat használ aszinkron és konkurens tesztekkel, a helyi Tesztkörnyezetből származó expect-et kell használni, hogy biztosítsa a megfelelő teszt azonosítását.

Snapshots frissítése

Amikor a kapott érték nem egyezik a snapshottal, a teszt elbukik, és megmutatja a különbséget. Ha a snapshot változása várható, érdemes lehet frissíteni a snapshotot az aktuális állapotra.

Figyelő módban a terminálban nyomja meg az u billentyűt az elbukott snapshot közvetlen frissítéséhez.

Vagy használhatja a --update vagy -u flaget a CLI-ben, hogy a Vitest frissítse a snapshotokat.

vitest -u

Fájl Snapshots (File Snapshots)

A toMatchSnapshot() hívásakor az összes snapshotot egy formázott snapshot fájlban tároljuk. Ez azt jelenti, hogy bizonyos karaktereket (nevezetesen a dupla idézőjelet " és a backtick `) fel kell oldani a snapshot stringben. Eközben elveszítheti a szintaxiskiemelést a snapshot tartalmánál (ha azok valamilyen nyelven íródtak).

Ezt figyelembe véve bevezettük a toMatchFileSnapshot() függvényt, hogy explicit módon fájlhoz hasonlítsuk. Ez lehetővé teszi, hogy bármilyen fájlkiterjesztést hozzárendeljen a snapshot fájlhoz, és ezáltal olvashatóbbá tegye a snapshotokat.

import { expect, it } from 'vitest';

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

Ez összehasonlítja a ./test/basic.output.html tartalmával, és a --update flaggel visszaírható.

Kép Snapshots (Image Snapshots)

Lehetőség van képek snapshotolására is a jest-image-snapshot segítségével.

npm i -D jest-image-snapshot

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

Egyéni szerializáló (Custom Serializer)

Hozzáadhatja saját logikáját a snapshotok szerializálásának módosításához. A Jesthez hasonlóan a Vitest is rendelkezik alapértelmezett szerializálókkal a beépített JavaScript típusokhoz, HTML elemekhez, ImmutableJS-hez és React elemekhez.

Explicit módon hozzáadhat egyéni szerializálót az expect.addSnapshotSerializer API használatával.

expect.addSnapshotSerializer({
  serialize(val, config, indentation, depth, refs, printer) {
    // `printer` egy függvény, amely a meglévő pluginok segítségével szerializál egy értéket.
    return `Pretty foo: ${printer(val.foo, config, indentation, depth, refs)}`;
  },
  test(val) {
    return val && Object.prototype.hasOwnProperty.call(val, 'foo');
  },
});

Támogatjuk a snapshotSerializers opciót is az egyéni szerializálók implicit hozzáadásához.

import { SnapshotSerializer } from 'vitest';

export default {
  serialize(val, config, indentation, depth, refs, printer) {
    // `printer` egy függvény, amely a meglévő pluginok segítségével szerializál egy értéket.
    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'],
  },
});

Miután hozzáadott egy ilyen tesztet:

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

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

A következő snapshotot kapja:

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

A Jest pretty-format csomagját használjuk a snapshotok szerializálásához. Erről bővebben itt olvashat: pretty-format.

Különbségek a Jesttől

A Vitest szinte kompatibilis snapshot funkciót biztosít a Jesttel néhány kivétellel:

1. A snapshot fájl fejlécében lévő komment elté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

Ez valójában nem befolyásolja a funkcionalitást, de hatással lehet a commit diffre, amikor Jestről migrál.

2. A printBasicPrototype alapértelmezett értéke false {#_2-printbasicprototype-is-default-to-false}

Mind a Jest, mind a Vitest snapshotjai a pretty-format segítségével működnek. A Vitestben a printBasicPrototype alapértelmezett értékét false-ra állítottuk a tisztább snapshot kimenetért, míg a Jest <29.0.0 verziójában alapértelmezés szerint true.

import { expect, test } from 'vitest';

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

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

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

Úgy gondoljuk, hogy ez egy ésszerűbb alapértelmezés az olvashatóság és az általános fejlesztői élmény (DX) szempontjából. Ha továbbra is a Jest viselkedését preferálja, módosíthatja a konfigurációját:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    snapshotFormat: {
      printBasicPrototype: true,
    },
  },
});

3. A chevron > elválasztóként szolgál a kettőspont : helyett az egyéni üzeneteknél {#_3-chevron-is-used-as-a-separator-instead-of-colon-for-custom-messages}

A Vitest a chevron > karaktert használja elválasztóként a kettőspont : helyett az olvashatóság érdekében, amikor egyéni üzenetet adunk át egy snapshot fájl létrehozásakor.

A következő példa tesztkódhoz:

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

Jestben a snapshot a következőképpen fog kinézni:

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

Vitestben az egyenértékű snapshot a következőképpen fog kinézni:

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

4. Az alapértelmezett Error snapshot különbözik a toThrowErrorMatchingSnapshot és a toThrowErrorMatchingInlineSnapshot esetében {#_4-default-error-snapshot-is-different-for-tothrowerrormatchingsnapshot-and-tothrowerrormatchinginlinesnapshot}

import { expect, test } from 'vitest'

test('snapshot', () => {
  // Jestben és Vitestben
  expect(new Error('error')).toMatchInlineSnapshot(`[Error: error]`)

  // A Jest az `Error.message`-t snapshotolja az `Error` példány esetén
  // A Vitest ugyanazt az értéket írja ki, mint a toMatchInlineSnapshot
  expect(() => {
    throw new Error('error')
  }).toThrowErrorMatchingInlineSnapshot(`"error"`) 
  }).toThrowErrorMatchingInlineSnapshot(`[Error: error]`) 
})