Pillanatkép

Tanulja meg a pillanatképeket videó segítségével a Vue School-on

A pillanatkép-tesztek rendkívül hasznos eszközök, amikor meg akarunk győződni arról, hogy a függvényeink kimenete nem változik váratlanul.

Pillanatkép készítésekor a Vitest elkészít egy pillanatképet az adott értékről, majd összehasonlítja azt egy referencia pillanatképfájllal, amelyet a teszt mellett tárol. A teszt sikertelen lesz, ha a két pillanatkép nem egyezik: ez vagy azt jelenti, hogy a változás váratlan, vagy a referencia-pillanatképet frissíteni kell az eredmény új verziójára.

Pillanatképek használata

Egy érték pillanatképének elkészítéséhez használhatja az expect() API toMatchSnapshot() függvényét:

import { expect, it } from 'vitest';

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

Amikor a teszt először fut, a Vitest létrehoz egy pillanatkép-fájlt, amely így néz ki:

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

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

A pillanatkép artefaktumot a kódváltozásokkal együtt kell véglegesíteni, és a kódellenőrzési folyamat részeként felül kell vizsgálni. A későbbi tesztfuttatások során a Vitest összehasonlítja a renderelt kimenetet az előző pillanatképpel. Ha egyeznek, a teszt sikeres lesz. Ha nem egyeznek, akkor vagy a tesztfuttató hibát talált a kódban, amit javítani kell, vagy az implementáció megváltozott, és a pillanatképet frissíteni kell.

WARNING

Amikor pillanatképeket használ aszinkron, párhuzamos tesztekkel, a helyi Tesztkörnyezet expect-jét kell használni a megfelelő teszt észlelésének biztosításához.

Beágyazott pillanatképek

Hasonlóképpen, használhatja a toMatchInlineSnapshot() függvényt a pillanatkép beágyazott formában történő tárolására a tesztfájlon belül.

import { expect, it } from 'vitest';

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

Pillanatkép-fájl létrehozása helyett a Vitest közvetlenül módosítja a tesztfájlt, hogy a pillanatképet karakterláncként frissítse:

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 váltogatna.

WARNING

Amikor pillanatképeket használ aszinkron, párhuzamos tesztekkel, a helyi Tesztkörnyezet expect-jét kell használni a megfelelő teszt észlelésének biztosításához.

Pillanatképek frissítése

Amikor a kapott érték nem egyezik a pillanatképpel, a teszt sikertelen lesz, és megmutatja a különbséget közöttük. Ha a pillanatkép változása várható, érdemes lehet frissíteni a pillanatképet az aktuális állapotra.

Watch módban a terminálban megnyomhatja az u billentyűt a sikertelen pillanatkép közvetlen frissítéséhez.

Vagy használhatja a --update vagy -u jelzőt a CLI-ben, hogy a Vitest frissítse a pillanatképeket.

vitest -u

Fájl-pillanatképek

A toMatchSnapshot() hívásakor az összes pillanatképet egy formázott pillanatkép-fájlban tároljuk. Ez azt jelenti, hogy bizonyos karaktereket (nevezetesen a dupla idézőjelet " és a backtick-et `) escape-elni kell a pillanatkép sztringben. Eközben elveszítheti a szintaxis kiemelést a pillanatkép tartalmának (ha azok valamilyen nyelven vannak).

Ennek fényében bevezettük a toMatchFileSnapshot() függvényt, hogy explicit módon egy fájl tartalmával hasonlítsuk össze. Ez lehetővé teszi, hogy bármilyen fájlkiterjesztést hozzárendeljen a pillanatkép-fájlhoz, és olvashatóbbá tegye azokat.

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ításra kerül a ./test/basic.output.html tartalmával. És visszaírható a --update jelzővel.

Kép-pillanatképek

Lehetőség van képek pillanatképének elkészítésére 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ó

Hozzáadhatja saját logikáját, hogy megváltoztassa a pillanatképek szerializálásának módját. Ahogy a Jest esetében, 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ő bővítmények 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 lehetőséget 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ő bővítmények 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 'vite';

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ő pillanatképet kapja:

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

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

Különbség a Jest-től

A Vitest szinte kompatibilis pillanatkép funkciót biztosít a Jest-ével néhány kivétellel:

1. A pillanatkép fájlban található komment fejléc eltér {#_1-comment-header-in-the-snapshot-file-is-different}

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

Ez valójában nem befolyásolja a funkcionalitást, de befolyásolhatja a commit diff-et, amikor Jest-ről migrál.

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

Mind a Jest, mind a Vitest pillanatképei a pretty-format által működnek. A Vitestben a printBasicPrototype alapértelmezett értékét false-ra állítottuk a tisztább pillanatkép kimenet érdekében, 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',
    },
  ];

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

  // Vitest-ben
  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 szempontjából. Ha továbbra is a Jest viselkedését részesíti előnyben, módosíthatja a konfigurációját:

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

3. A chevron > elválasztóként szolgál a kettőspont : helyett az egyéni üzenetek esetén {#_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 pillanatkép-fájl létrehozásakor.

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

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

Jest-ben a pillanatkép a következő lesz:

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

Vitest-ben az egyenértékű pillanatkép a következő lesz:

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

4. Az alapértelmezett Error pillanatkép eltér a toThrowErrorMatchingSnapshot és a toThrowErrorMatchingInlineSnapshot esetében {#_4-default-error-snapshot-is-different-for-tothrowerrormatchingsnapshot-and-tothrowerrormatchinginlinesnapshot}

import { expect, test } from 'vitest';

test('snapshot', () => {
  // Jest-ben és Vitest-ben
  expect(new Error('error')).toMatchInlineSnapshot(`[Error: error]`);

  // A Jest az `Error.message`-ről készít pillanatképet az `Error` példány esetén
  // A Vitest ugyanazt az értéket nyomtatja, mint a toMatchInlineSnapshot
  expect(() => {
    throw new Error('error');
  }).toThrowErrorMatchingInlineSnapshot(`"error"`); 
  }).toThrowErrorMatchingInlineSnapshot(`[Error: error]`); 
});