Add custom Uint8Array snapshot serializer for Vitest

Introduces a custom snapshot serializer for Uint8Array to improve readability of inline snapshots in tests. Updates test assertions and snapshots to use the new 'uint8:[...]' format. Adjusts ESLint and tsconfig to support the new vitest config file and serializer.

Author: steida

eslint.config.mjs

@@ -16,6 +16,16 @@ export default tseslint.config(
       "**/.svelte-kit/",
     ],
   },
+  {
+    files: ["packages/**/vitest.config.ts"],
+    extends: [eslint.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: null, // Don't use project service for vitest configs
+      },
+    },
+  },
   {
     files: [
       "apps/**/*.{ts,tsx}",

packages/common/test/Buffer.test.ts

@@ -32,28 +32,15 @@ test("Buffer", () => {
   expect(buffer.getCapacity()).toBe(2048);
 
   const buffer2 = createBuffer([1]);
-  expect(buffer2.unwrap()).toMatchInlineSnapshot(`
-    Uint8Array [
-      1,
-    ]
-  `);
+  expect(buffer2.unwrap()).toMatchInlineSnapshot(`uint8:[1]`);
 
   expect(buffer2.shift()).toBe(1);
-  expect(buffer2.unwrap()).toMatchInlineSnapshot(`Uint8Array []`);
+  expect(buffer2.unwrap()).toMatchInlineSnapshot(`uint8:[]`);
 
   buffer2.extend([1, 2, 3]);
-  expect(buffer2.shiftN(2 as NonNegativeInt)).toMatchInlineSnapshot(`
-    Uint8Array [
-      1,
-      2,
-    ]
-  `);
-
-  expect(buffer2.unwrap()).toMatchInlineSnapshot(`
-    Uint8Array [
-      3,
-    ]
-  `);
+  expect(buffer2.shiftN(2 as NonNegativeInt)).toMatchInlineSnapshot(`uint8:[1,2]`);
+
+  expect(buffer2.unwrap()).toMatchInlineSnapshot(`uint8:[3]`);
 
   expect(() => buffer2.shiftN(2 as NonNegativeInt)).toThrow(BufferError);
   expect(() => buffer2.shiftN(2 as NonNegativeInt)).toThrowError(

packages/common/test/Evolu/Protocol.test.ts

@@ -74,11 +74,6 @@ import {
   testTimestampsRandom,
 } from "./_fixtures.js";
 
-// Note we use `.join()` on Uint8Array/Buffer for two reasons:
-//  - We want toMatchInlineSnapshot to be a single line (a string is).
-//  - better-sqlite3 returns Buffer (a subclass of Uint8Array) and toEqual expects
-//    the same prototype.
-
 beforeAll(async () => {
   await init();
 });
@@ -127,8 +122,8 @@ test("encodeNumber/decodeNumber", () => {
     expect(encoded.getLength()).toBe(0);
   });
 
-  expect(buffer.unwrap().join()).toMatchInlineSnapshot(
-    `"0,42,208,133,203,64,9,33,249,240,27,134,110,203,67,63,255,255,255,255,255,255,203,195,63,255,255,255,255,255,255,203,127,240,0,0,0,0,0,0,203,255,240,0,0,0,0,0,0,203,127,248,0,0,0,0,0,0"`,
+  expect(buffer.unwrap()).toMatchInlineSnapshot(
+    `uint8:[0,42,208,133,203,64,9,33,249,240,27,134,110,203,67,63,255,255,255,255,255,255,203,195,63,255,255,255,255,255,255,203,127,240,0,0,0,0,0,0,203,255,240,0,0,0,0,0,0,203,127,248,0,0,0,0,0,0]`,
   );
 });
 
@@ -205,8 +200,8 @@ test("encodeString/decodeString", () => {
   const string = "Hello, world!";
   const buffer = createBuffer();
   encodeString(buffer, string);
-  expect(buffer.unwrap().join()).toMatchInlineSnapshot(
-    `"13,72,101,108,108,111,44,32,119,111,114,108,100,33"`,
+  expect(buffer.unwrap()).toMatchInlineSnapshot(
+    `uint8:[13,72,101,108,108,111,44,32,119,111,114,108,100,33]`,
   );
   expect(decodeString(buffer)).toBe(string);
 });
@@ -271,8 +266,8 @@ test("encodeSqliteValue/decodeSqliteValue", () => {
     expect(encoded.getLength()).toBe(bytesLength);
     expect(decodeSqliteValue(encoded)).toStrictEqual(value);
   });
-  expect(buffer.unwrap().join()).toMatchInlineSnapshot(
-    `"31,21,203,64,94,224,0,0,0,0,0,21,208,133,22,23,3,1,2,3,33,22,20,26,143,148,38,115,42,65,147,87,230,226,141,159,8,0,19,30,123,30,255,127,34,18,130,167,99,111,109,112,97,99,116,195,166,115,99,104,101,109,97,0,36,203,194,204,69,55,130,48,0,0,35,128,232,252,254,173,50,35,128,168,131,232,192,127,35,128,128,200,165,182,128,1,35,255,183,255,144,253,206,57"`,
+  expect(buffer.unwrap()).toMatchInlineSnapshot(
+    `uint8:[31,21,203,64,94,224,0,0,0,0,0,21,208,133,22,23,3,1,2,3,33,22,20,26,143,148,38,115,42,65,147,87,230,226,141,159,8,0,19,30,123,30,255,127,34,18,130,167,99,111,109,112,97,99,116,195,166,115,99,104,101,109,97,0,36,203,194,204,69,55,130,48,0,0,35,128,232,252,254,173,50,35,128,168,131,232,192,127,35,128,128,200,165,182,128,1,35,255,183,255,144,253,206,57]`,
   );
 });
 
@@ -429,8 +424,8 @@ const createEncryptedCrdtMessage = (
 test("encodeAndEncryptDbChange/decryptAndDecodeDbChange", () => {
   const crdtMessage = createTestCrdtMessage();
   const encryptedMessage = createEncryptedCrdtMessage(crdtMessage);
-  expect(encryptedMessage.change.join()).toMatchInlineSnapshot(
-    `"149,88,168,255,159,170,32,144,166,127,188,43,16,197,141,78,178,25,209,69,79,137,211,186,120,89,68,115,201,20,188,25,107,207,226,207,25,113,154,119,48,137,23,100,221,136,33,234,191,149,54,55,4,80,245,119,72,37,102,23,181,187,177,238,170,113,181,52,134,209,234,94,22,160,170,34,79,41,203,219,148,204,123,190,61,125,163,37,229,226,57,157,101,78,216,162,253,247,117,96,108,221,94,36,217,25,99,46,61,151,46,59,158,70,42,12,106,8,252,51,215,142,231,198,63,23,80,181,203,128,154,170,45,25,194,227,16,17,218,171,11,53,81,110,176"`,
+  expect(encryptedMessage.change).toMatchInlineSnapshot(
+    `uint8:[149,88,168,255,159,170,32,144,166,127,188,43,16,197,141,78,178,25,209,69,79,137,211,186,120,89,68,115,201,20,188,25,107,207,226,207,25,113,154,119,48,137,23,100,221,136,33,234,191,149,54,55,4,80,245,119,72,37,102,23,181,187,177,238,170,113,181,52,134,209,234,94,22,160,170,34,79,41,203,219,148,204,123,190,61,125,163,37,229,226,57,157,101,78,216,162,253,247,117,96,108,221,94,36,217,25,99,46,61,151,46,59,158,70,42,12,106,8,252,51,215,142,231,198,63,23,80,181,203,128,154,170,45,25,194,227,16,17,218,171,11,53,81,110,176]`,
   );
   const decrypted = decryptAndDecodeDbChange({
     symmetricCrypto: testSymmetricCrypto,
@@ -519,8 +514,8 @@ describe("createProtocolMessageBuffer", () => {
     const buffer = createProtocolMessageBuffer(testOwner.id, {
       messageType: MessageType.Request,
     });
-    expect(buffer.unwrap().join()).toMatchInlineSnapshot(
-      `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0"`,
+    expect(buffer.unwrap()).toMatchInlineSnapshot(
+      `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0]`,
     );
   });
 
@@ -609,9 +604,9 @@ test("createProtocolMessageForSync", async () => {
 
   // Empty DB: version, ownerId, 0 messages, one empty TimestampsRange.
   expect(
-    createProtocolMessageForSync(storageDep)(testOwner.id)?.join(),
+    createProtocolMessageForSync(storageDep)(testOwner.id),
   ).toMatchInlineSnapshot(
-    `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,1,2,0"`,
+    `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,1,2,0]`,
   );
 
   const messages31 = testTimestampsAsc.slice(0, 31).map(
@@ -628,9 +623,9 @@ test("createProtocolMessageForSync", async () => {
 
   // DB with 31 timestamps: version, ownerId, 0 messages, one full (31) TimestampsRange.
   expect(
-    createProtocolMessageForSync(storageDep)(testOwner.id)?.join(),
+    createProtocolMessageForSync(storageDep)(testOwner.id),
   ).toMatchInlineSnapshot(
-    `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,1,2,31,0,163,205,139,2,152,222,222,3,141,195,32,138,221,210,1,216,167,200,1,243,155,45,128,152,244,5,167,136,182,1,199,139,225,5,131,234,154,8,0,150,132,58,233,134,161,1,222,244,220,1,250,141,170,3,248,167,204,1,0,161,234,59,0,192,227,115,181,188,169,1,224,169,247,4,205,177,37,143,161,242,1,137,231,180,2,161,244,87,235,207,53,133,244,180,1,142,243,223,10,158,141,113,0,11,1,1,0,5,1,1,0,1,1,1,0,11,0,0,0,0,0,0,0,0,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,11,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6,153,201,144,40,214,99,106,145,1"`,
+    `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,1,2,31,0,163,205,139,2,152,222,222,3,141,195,32,138,221,210,1,216,167,200,1,243,155,45,128,152,244,5,167,136,182,1,199,139,225,5,131,234,154,8,0,150,132,58,233,134,161,1,222,244,220,1,250,141,170,3,248,167,204,1,0,161,234,59,0,192,227,115,181,188,169,1,224,169,247,4,205,177,37,143,161,242,1,137,231,180,2,161,244,87,235,207,53,133,244,180,1,142,243,223,10,158,141,113,0,11,1,1,0,5,1,1,0,1,1,1,0,11,0,0,0,0,0,0,0,0,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,11,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6,153,201,144,40,214,99,106,145,1]`,
   );
 
   const message32 = testTimestampsAsc.slice(32, 33).map(
@@ -647,9 +642,9 @@ test("createProtocolMessageForSync", async () => {
 
   // DB with 32 timestamps: version, ownerId, 0 messages, 16x FingerprintRange.
   expect(
-    createProtocolMessageForSync(storageDep)(testOwner.id)?.join(),
+    createProtocolMessageForSync(storageDep)(testOwner.id),
   ).toMatchInlineSnapshot(
-    `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,16,187,171,234,5,151,160,243,1,203,195,245,1,167,160,170,7,202,245,251,13,150,132,58,199,251,253,2,242,181,246,4,161,234,59,192,227,115,149,230,160,6,220,210,151,2,170,219,140,3,240,195,234,1,172,128,209,11,0,15,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,5,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,7,153,201,144,40,214,99,106,145,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,79,199,221,49,166,129,34,35,99,27,109,221,72,203,113,173,13,174,108,244,220,53,10,79,91,208,39,170,201,18,73,253,152,51,99,124,0,152,50,246,239,212,6,13,80,19,126,71,76,18,73,200,62,200,42,99,188,63,73,207,154,238,98,14,224,33,103,255,188,202,60,84,33,248,184,78,240,231,221,198,98,244,79,237,208,100,110,251,209,4,221,129,70,179,162,173,26,9,38,199,115,85,231,208,141,13,135,35,144,151,124,233,151,6,119,79,51,128,236,157,32,91,160,104,143,239,236,16,148,246,215,168,225,200,73,253,182,117,53,113,24,52,165,196,73,55,66,212,228,27,187,1,71,143,234,75,93,129,254,145,224,183,203,200,8,205,21,142,6,139,145,237,12,30,146,233,222,152,203,251,132,199,125,55,190,43,113,63,180,29,179,161"`,
+    `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,0,0,0,16,187,171,234,5,151,160,243,1,203,195,245,1,167,160,170,7,202,245,251,13,150,132,58,199,251,253,2,242,181,246,4,161,234,59,192,227,115,149,230,160,6,220,210,151,2,170,219,140,3,240,195,234,1,172,128,209,11,0,15,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,5,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,7,153,201,144,40,214,99,106,145,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,79,199,221,49,166,129,34,35,99,27,109,221,72,203,113,173,13,174,108,244,220,53,10,79,91,208,39,170,201,18,73,253,152,51,99,124,0,152,50,246,239,212,6,13,80,19,126,71,76,18,73,200,62,200,42,99,188,63,73,207,154,238,98,14,224,33,103,255,188,202,60,84,33,248,184,78,240,231,221,198,98,244,79,237,208,100,110,251,209,4,221,129,70,179,162,173,26,9,38,199,115,85,231,208,141,13,135,35,144,151,124,233,151,6,119,79,51,128,236,157,32,91,160,104,143,239,236,16,148,246,215,168,225,200,73,253,182,117,53,113,24,52,165,196,73,55,66,212,228,27,187,1,71,143,234,75,93,129,254,145,224,183,203,200,8,205,21,142,6,139,145,237,12,30,146,233,222,152,203,251,132,199,125,55,190,43,113,63,180,29,179,161]`,
   );
 });
 
@@ -759,10 +754,8 @@ describe("E2E errors", () => {
     })(initiatorMessage);
 
     assert(responseWithWriteKeyError.ok);
-    expect(
-      responseWithWriteKeyError.value.message.join(),
-    ).toMatchInlineSnapshot(
-      `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,1,1,0"`,
+    expect(responseWithWriteKeyError.value.message).toMatchInlineSnapshot(
+      `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,1,1,0]`,
     );
 
     expect(
@@ -860,8 +853,8 @@ describe("E2E relay options", () => {
       messages,
     );
 
-    expect(initiatorMessage.join()).toMatchInlineSnapshot(
-      `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,1,223,255,201,168,127,27,26,188,250,180,237,65,254,6,128,233,0,1,0,0,1,0,0,0,0,0,0,0,0,1,145,1,126,237,229,95,73,192,255,134,205,60,46,41,126,169,147,15,206,168,124,117,185,198,175,101,120,21,32,227,252,120,101,95,69,58,81,167,150,166,242,89,69,218,80,205,68,152,219,242,173,120,62,144,2,119,173,123,184,240,144,57,121,65,100,160,38,85,128,38,96,169,33,228,3,193,241,215,31,228,6,232,64,216,65,97,219,252,33,224,229,129,247,52,105,30,77,187,241,108,115,153,242,144,245,188,248,27,186,77,152,200,40,195,199,4,216,123,30,157,93,130,248,68,189,136,109,228,112,98,79,32,187,215,193,124,53,104,248,230,32,191,151,188,52,132,132"`,
+    expect(initiatorMessage).toMatchInlineSnapshot(
+      `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,0,1,223,255,201,168,127,27,26,188,250,180,237,65,254,6,128,233,0,1,0,0,1,0,0,0,0,0,0,0,0,1,145,1,126,237,229,95,73,192,255,134,205,60,46,41,126,169,147,15,206,168,124,117,185,198,175,101,120,21,32,227,252,120,101,95,69,58,81,167,150,166,242,89,69,218,80,205,68,152,219,242,173,120,62,144,2,119,173,123,184,240,144,57,121,65,100,160,38,85,128,38,96,169,33,228,3,193,241,215,31,228,6,232,64,216,65,97,219,252,33,224,229,129,247,52,105,30,77,187,241,108,115,153,242,144,245,188,248,27,186,77,152,200,40,195,199,4,216,123,30,157,93,130,248,68,189,136,109,228,112,98,79,32,187,215,193,124,53,104,248,230,32,191,151,188,52,132,132]`,
     );
 
     let broadcastedMessage = null as Uint8Array | null;
@@ -881,8 +874,8 @@ describe("E2E relay options", () => {
 
     assert(broadcastedMessage);
     // Added error and removed writeKey, added subscription flag
-    expect(broadcastedMessage.join()).toMatchInlineSnapshot(
-      `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,2,1,0,0,1,0,0,0,0,0,0,0,0,1,145,1,126,237,229,95,73,192,255,134,205,60,46,41,126,169,147,15,206,168,124,117,185,198,175,101,120,21,32,227,252,120,101,95,69,58,81,167,150,166,242,89,69,218,80,205,68,152,219,242,173,120,62,144,2,119,173,123,184,240,144,57,121,65,100,160,38,85,128,38,96,169,33,228,3,193,241,215,31,228,6,232,64,216,65,97,219,252,33,224,229,129,247,52,105,30,77,187,241,108,115,153,242,144,245,188,248,27,186,77,152,200,40,195,199,4,216,123,30,157,93,130,248,68,189,136,109,228,112,98,79,32,187,215,193,124,53,104,248,230,32,191,151,188,52,132,132"`,
+    expect(broadcastedMessage).toMatchInlineSnapshot(
+      `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,2,1,0,0,1,0,0,0,0,0,0,0,0,1,145,1,126,237,229,95,73,192,255,134,205,60,46,41,126,169,147,15,206,168,124,117,185,198,175,101,120,21,32,227,252,120,101,95,69,58,81,167,150,166,242,89,69,218,80,205,68,152,219,242,173,120,62,144,2,119,173,123,184,240,144,57,121,65,100,160,38,85,128,38,96,169,33,228,3,193,241,215,31,228,6,232,64,216,65,97,219,252,33,224,229,129,247,52,105,30,77,187,241,108,115,153,242,144,245,188,248,27,186,77,152,200,40,195,199,4,216,123,30,157,93,130,248,68,189,136,109,228,112,98,79,32,187,215,193,124,53,104,248,230,32,191,151,188,52,132,132]`,
     );
 
     let writeMessagesCalled = false;
@@ -1247,8 +1240,8 @@ describe("E2E sync", () => {
       applyProtocolMessageAsRelay(relayStorageDep)(protocolMessage);
 
     assert(relayResult.ok);
-    expect(relayResult.value.message.join()).toMatchInlineSnapshot(
-      `"0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,1,0,0,1,2,9,0,163,205,139,2,152,222,222,3,141,195,32,138,221,210,1,216,167,200,1,243,155,45,128,152,244,5,167,136,182,1,0,9,0,0,0,0,0,0,0,0,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6"`,
+    expect(relayResult.value.message).toMatchInlineSnapshot(
+      `uint8:[0,26,109,171,196,54,34,110,152,233,244,194,208,98,9,215,56,1,0,0,1,2,9,0,163,205,139,2,152,222,222,3,141,195,32,138,221,210,1,216,167,200,1,243,155,45,128,152,244,5,167,136,182,1,0,9,0,0,0,0,0,0,0,0,1,104,162,167,191,63,133,160,150,1,153,201,144,40,214,99,106,145,1,104,162,167,191,63,133,160,150,6]`,
     );
     // Sync continue
     expect(relayResult.value).not.toBe(null);