Cara Mengeluarkan Nilai Dinamik Daripada Syot Kilat Dengan Pensiri

Ujian syot kilat dalam Jest dan Vitest ialah alat yang berkuasa untuk mengesan perubahan yang tidak dijangka dalam output kod anda. Walau bagaimanapun, ia mudah pecah apabila berurusan dengan nilai dinamik seperti ID yang dijana atau cap masa yang berubah dengan setiap ujian dijalankan. Walaupun mengejek nilai ini adalah mungkin, ia boleh membawa kepada kesan sampingan yang tidak diingini.

Pertimbangkan objek pengguna ini yang boleh dikembalikan daripada panggilan API atau pertanyaan pangkalan data:

const user = {
  id: crypto.randomUUID(),
  name: "John Doe",
  createdAt: new Date().toISOString()
};

Setiap kali anda menjalankan ujian anda, nilai id dan createAt akan berbeza, menyebabkan syot kilat anda gagal.

Pelaksanaan Asas

Berikut ialah cara untuk mencipta penyeri tersuai yang menggantikan nilai dinamik dengan ruang letak yang konsisten:

const property = 'id';
const placeholder = '[ID]';

expect.addSnapshotSerializer({
  test(val) {
    return val && typeof val === 'object' && Object.hasOwn(val, property) && val[property] !== placeholder
  },
  serialize(val, config, indentation, depth, refs, printer) {
    return printer(
      {
        ...(val as Record<string, unknown>),
        [property]: placeholder,
      },
      config,
      indentation,
      depth,
      refs,
    );
  },
});

Anda boleh menambah penyeri syot kilat tersuai dengan expect.addSnapshotSerializer().
Ia mengharapkan objek dengan dua fungsi:

• test() digunakan untuk menentukan sama ada penyeri tersuai ini harus digunakan. Ia menyemak sama ada nilai daripada jangkaan(nilai) ialah objek dengan harta itu dan belum digantikan oleh pemegang tempat.

• serialize() hanya dipanggil jika test() telah kembali benar. Ia menggantikan harta dengan pemegang tempat dan memanggil fungsi pencetak() untuk menyerikan nilai menjadi rentetan seperti JSON.

Ujian

Sekarang, apabila anda menjalankan ujian anda, anda akan melihat bahawa id telah digantikan dengan pemegang tempat [ID]:

interface User {
  id: string;
  name: string;
  createdAt: string;
}

expect.addSnapshotSerializer({ /* ... */ });

test('snapshot', () => {
  const user: User = {
    id: '123e4567-e89b-12d3-a456-426614174000',
    name: 'John Doe',
    createdAt: '2024-03-20T12:00:00Z',
  };

  expect(user).toMatchInlineSnapshot(`
    {
      "id": "[ID]",
      "name": "John Doe",
    }
  `);
});

Menjadikannya Boleh Digunakan Semula

Bagaimana jika kita perlu mengendalikan berbilang sifat dinamik? Mari cipta penyelesaian boleh guna semula:

export const replaceProperty = (
  property: string,
  placeholder: string,
): SnapshotSerializer => {
  return {
    test(val) {
      return val && typeof val === 'object' && Object.hasOwn(val, property) && val[property] !== placeholder
    },
    serialize(val, config, indentation, depth, refs, printer) {
      return printer(
        {
          ...(val as Record<string, unknown>),
          [property]: placeholder,
        },
        config,
        indentation,
        depth,
        refs,
      );
    },
  };
};

Dalam ujian anda, anda boleh mencipta berbilang penyeri untuk sifat yang berbeza:

expect.addSnapshotSerializer(replaceProperty('id', '[ID]'));
expect.addSnapshotSerializer(replaceProperty('createdAt', '[TIMESTAMP]'));

Saya menggunakan penyeri bersiri ini dengan kerap sehingga saya mencipta penyeri syot kilat pakej npm untuk memudahkan semua orang.

import { replaceProperty, removeProperty } from 'snapshot-serializers';

type User = {
  id: string;
  name: string;
  createdAt: string;
  password?: string;
};

// Type-safe property replacement
expect.addSnapshotSerializer(
  // TypeScript will only allow "id" | "name" | "createdAt" | "password"
  replaceProperty<User>({
    property: 'id',
    placeholder: '[ID]'
  })
);

// Remove properties entirely
expect.addSnapshotSerializer(
  removeProperty<User>({
    property: 'password'
  })
);

// This would cause a TypeScript error:
expect.addSnapshotSerializer(
  replaceProperty<User>({
    property: 'invalid' // Error: Type '"invalid"' is not assignable...
  })
);

Ia menyediakan API jenis selamat untuk menggantikan atau mengalih keluar sifat dalam syot kilat anda. Anda boleh menyediakan parameter jenis generik seperti removeProperty() dan fungsi itu akan mencadangkan semua nama sifat yang mungkin berdasarkan jenis Pengguna. Sebarang sifat lain akan menyebabkan ralat TypeScript.

Atas ialah kandungan terperinci Cara Mengeluarkan Nilai Dinamik Daripada Syot Kilat Dengan Pensiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!